// Problem, Solution, Features, Social Proof, FAQ sections

function Problem() {
  const pains = [
    {
      icon: <IInbox size={18} />,
      title: "Buried in your inbox",
      desc: "The field trip permission form was in your inbox. You found it a day after it expired.",
    },
    {
      icon: <IUsers size={18} />,
      title: "It went to the wrong parent",
      desc: "Soccer registration went to your ex. You have the kids that Saturday.",
    },
    {
      icon: <IChat size={18} />,
      title: "It's buried in WhatsApp",
      desc: '"Practice moved to Friday" — buried somewhere in 47 messages you haven\'t opened.',
    },
    {
      icon: <IClock size={18} />,
      title: "The invisible second job",
      desc: "Forwarding, RSVPing, copy-pasting, reminding. It adds up to hours you don't have.",
    },
  ];
  return (
    <section id="problem" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">The problem</span>
          <h2>
            You didn't sign up to be
            <br />
            the family scheduler.
          </h2>
          <p>
            Three inboxes, two calendars, four group chats — and somewhere in
            there is a dentist appointment you haven't seen yet.
          </p>
        </div>
        <div
          className="problem-grid reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
            gap: 16,
          }}
        >
          {pains.map((p, i) => (
            <div
              key={i}
              style={{
                padding: 24,
                borderRadius: 12,
                border: "1px solid var(--line)",
                background: "var(--bg-elev)",
                transition: "all 0.2s ease",
              }}
            >
              <div
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 8,
                  background: "var(--bg-soft)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: "var(--ink-2)",
                  marginBottom: 14,
                }}
              >
                {p.icon}
              </div>
              <h3 style={{ fontSize: 15, marginBottom: 6 }}>{p.title}</h3>
              <p
                style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}
              >
                {p.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const [active, setActive] = React.useState(0);
  const paused = React.useRef(false);
  const steps = [
    {
      title: "Connect",
      desc: "Sign in with Gmail. Read-only — we can never send, delete, or touch anything in your inbox.",
      icon: <IMail size={16} />,
    },
    {
      title: "We watch",
      desc: "Every new email gets checked. Newsletters, receipts, and junk are filtered before you see them.",
      icon: <ISpark size={16} />,
    },
    {
      title: "We extract",
      desc: "School concerts, doctor's appointments, soccer practice — pulled straight into your calendar.",
      icon: <ICheck size={16} />,
    },
    {
      title: "You just show up",
      desc: "Events go into the right calendar with the right person tagged. Drafted replies wait for your OK.",
      icon: <ICal size={16} />,
    },
  ];

  React.useEffect(() => {
    const t = setInterval(() => {
      if (!paused.current) setActive((a) => (a + 1) % steps.length);
    }, 3200);
    return () => clearInterval(t);
  }, []);

  return (
    <section
      id="how"
      style={{
        background: "var(--bg-soft)",
        borderTop: "1px solid var(--line)",
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">How it works</span>
          <h2>
            Set it up once.
            <br />
            It handles the rest.
          </h2>
        </div>
        <div
          className="how-grid reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr)",
            gap: 48,
            alignItems: "start",
          }}
        >
          <div
            style={{ display: "flex", flexDirection: "column", gap: 4 }}
            onMouseLeave={() => {
              paused.current = false;
            }}
          >
            {steps.map((s, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                onMouseEnter={() => {
                  paused.current = true;
                  setActive(i);
                }}
                style={{
                  textAlign: "left",
                  padding: "20px 20px 20px 24px",
                  borderRadius: 10,
                  border: "1px solid transparent",
                  borderColor:
                    active === i ? "var(--line-strong)" : "transparent",
                  background: active === i ? "var(--bg-elev)" : "transparent",
                  display: "flex",
                  gap: 16,
                  alignItems: "flex-start",
                  transition: "all 0.25s ease",
                  position: "relative",
                }}
              >
                <div
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 999,
                    background:
                      active === i ? "var(--accent-ink)" : "var(--bg-elev)",
                    border: "1px solid",
                    borderColor:
                      active === i ? "var(--accent-ink)" : "var(--line-strong)",
                    color: active === i ? "white" : "var(--muted)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 12,
                    fontWeight: 500,
                    flexShrink: 0,
                    marginTop: 2,
                    transition: "all 0.25s ease",
                  }}
                >
                  {i + 1}
                </div>
                <div>
                  <div
                    style={{
                      fontWeight: 500,
                      fontSize: 16,
                      color: "var(--ink)",
                      marginBottom: 4,
                    }}
                  >
                    {s.title}
                  </div>
                  <div
                    style={{
                      fontSize: 14,
                      color: "var(--muted)",
                      lineHeight: 1.5,
                    }}
                  >
                    {s.desc}
                  </div>
                </div>
              </button>
            ))}
          </div>
          <HowVisual active={active} />
        </div>
      </div>
    </section>
  );
}

function HowVisual({ active }) {
  return (
    <div
      style={{
        background: "var(--bg-elev)",
        borderRadius: "var(--radius-lg)",
        border: "1px solid var(--line)",
        boxShadow: "var(--shadow-md)",
        padding: 32,
        minHeight: 380,
        position: "relative",
        overflow: "hidden",
      }}
    >
      {[
        <ConnectStage key="0" />,
        <WatchStage key="1" />,
        <ExtractStage key="2" />,
        <FocusStage key="3" />,
      ].map((stage, i) => (
        <div
          key={i}
          style={{
            position: "absolute",
            inset: 32,
            opacity: active === i ? 1 : 0,
            transform: active === i ? "translateY(0)" : "translateY(8px)",
            transition: "all 0.4s ease",
            pointerEvents: active === i ? "auto" : "none",
          }}
        >
          {stage}
        </div>
      ))}
    </div>
  );
}

function ConnectStage() {
  const accounts = [
    {
      name: "Gmail",
      detail: "jane@gmail.com",
      connected: true,
      color: "#74473B",
    },
    {
      name: "Google Calendar",
      detail: "Personal · Work · Lily · Max",
      connected: true,
      color: "#2D5A52",
    },
    {
      name: "WhatsApp",
      detail: "3 groups monitored",
      connected: true,
      color: "#71717A",
    },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div
        className="mono"
        style={{
          fontSize: 11,
          color: "var(--muted)",
          textTransform: "uppercase",
          letterSpacing: "0.1em",
          marginBottom: 4,
        }}
      >
        Connected accounts
      </div>
      {accounts.map((a, i) => (
        <div
          key={i}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 14,
            padding: 14,
            borderRadius: 10,
            border: "1px solid var(--line)",
            background: "var(--bg-soft)",
          }}
        >
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: 8,
              background: a.color,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "white",
              fontWeight: 600,
              fontSize: 13,
            }}
          >
            {a.name[0]}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 500, fontSize: 14 }}>{a.name}</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>
              {a.detail}
            </div>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 6,
              color: "var(--accent-ink)",
              fontSize: 12,
              fontWeight: 500,
            }}
          >
            <ICheck size={14} /> Connected
          </div>
        </div>
      ))}
    </div>
  );
}

function WatchStage() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div
        className="mono"
        style={{
          fontSize: 11,
          color: "var(--muted)",
          textTransform: "uppercase",
          letterSpacing: "0.1em",
          marginBottom: 8,
        }}
      >
        Last 24 hours
      </div>
      {[
        { label: "142 emails received", tag: "all", faded: false },
        { label: "89 filtered as promotional", tag: "noise", faded: true },
        { label: "23 newsletters & social", tag: "noise", faded: true },
        { label: "18 routine notifications", tag: "noise", faded: true },
        {
          label: "12 important — surfaced for you",
          tag: "signal",
          faded: false,
        },
      ].map((row, i) => (
        <div
          key={i}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 12,
            padding: "10px 12px",
            borderRadius: 8,
            background:
              row.tag === "signal"
                ? "color-mix(in oklch, var(--accent) 10%, transparent)"
                : "var(--bg-soft)",
            border: "1px solid",
            borderColor:
              row.tag === "signal"
                ? "color-mix(in oklch, var(--accent) 30%, transparent)"
                : "var(--line)",
            opacity: row.faded ? 0.55 : 1,
            fontSize: 13,
          }}
        >
          <div
            style={{
              width: 8,
              height: 8,
              borderRadius: 999,
              background:
                row.tag === "signal" ? "var(--accent)" : "var(--muted)",
            }}
          />
          <span>{row.label}</span>
        </div>
      ))}
    </div>
  );
}

function ExtractStage() {
  return (
    <div>
      <div
        className="mono"
        style={{
          fontSize: 11,
          color: "var(--muted)",
          textTransform: "uppercase",
          letterSpacing: "0.1em",
          marginBottom: 16,
        }}
      >
        Extracted this week
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {[
          {
            who: "Lily",
            whoC: "#74473B",
            title: "Spring Concert",
            meta: "Thu May 14 · 6:30 PM · School Gym",
            src: "Greenwood Elementary",
          },
          {
            who: "Max",
            whoC: "#2D5A52",
            title: "Wellness Check",
            meta: "Fri May 22 · 10:15 AM · Riverside Clinic",
            src: "Pediatrician",
          },
          {
            who: "You",
            whoC: "#71717A",
            title: "Parent-teacher conf.",
            meta: "Wed May 20 · 4:00 PM · Greenwood Elem.",
            src: "School portal",
          },
        ].map((e, i) => (
          <div
            key={i}
            style={{
              padding: 12,
              borderRadius: 10,
              border: "1px solid var(--line)",
              background: "var(--bg-soft)",
              display: "flex",
              alignItems: "center",
              gap: 12,
            }}
          >
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: 8,
                background: e.whoC,
                color: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 12,
                fontWeight: 600,
              }}
            >
              {e.who[0]}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{e.title}</div>
              <div
                className="mono"
                style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}
              >
                {e.meta}
              </div>
            </div>
            <div
              style={{
                fontSize: 11,
                color: "var(--muted)",
                whiteSpace: "nowrap",
              }}
            >
              from {e.src}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FocusStage() {
  return (
    <div>
      <div
        className="mono"
        style={{
          fontSize: 11,
          color: "var(--muted)",
          textTransform: "uppercase",
          letterSpacing: "0.1em",
          marginBottom: 16,
        }}
      >
        Tomorrow at a glance
      </div>
      <div
        style={{
          padding: "14px 18px",
          borderRadius: 12,
          background: "var(--bg-soft)",
          border: "1px solid var(--line)",
          marginBottom: 10,
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
          gap: 12,
        }}
      >
        <div
          style={{
            fontSize: 20,
            fontWeight: 500,
            letterSpacing: "-0.02em",
          }}
        >
          3 events. 1 needs you.
        </div>
        <div
          style={{ fontSize: 12, color: "var(--muted)", whiteSpace: "nowrap" }}
        >
          Wed, May 14
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {[
          {
            time: "8:30 AM",
            title: "School drop-off — Lily",
            sub: "Auto",
            urgent: false,
          },
          {
            time: "4:00 PM",
            title: "Parent-teacher conf.",
            sub: "Confirm RSVP — draft ready",
            urgent: true,
          },
          {
            time: "6:30 PM",
            title: "Lily — Spring Concert",
            sub: "Reminder set",
            urgent: false,
          },
        ].map((e, i) => (
          <div
            key={i}
            style={{
              display: "flex",
              gap: 14,
              padding: 12,
              borderRadius: 10,
              border: "1px solid var(--line)",
              background: "var(--bg-elev)",
            }}
          >
            <div
              className="mono"
              style={{
                fontSize: 12,
                color: "var(--muted)",
                width: 64,
                paddingTop: 2,
              }}
            >
              {e.time}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{e.title}</div>
              <div
                style={{
                  fontSize: 12,
                  color: e.urgent ? "var(--accent-ink)" : "var(--muted)",
                  marginTop: 2,
                  fontWeight: e.urgent ? 500 : 400,
                }}
              >
                {e.sub}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// Features grid
// ============================================================

function Features() {
  const feats = [
    {
      tag: "Inbox",
      icon: <IMail size={18} />,
      title: "Your inbox gets quiet",
      desc: "Newsletters, receipts, and social updates fade out. The message from the school nurse floats to the top.",
    },
    {
      tag: "Calendar",
      icon: <ICal size={18} />,
      title: "Events show up before you forget them",
      desc: "Dates, times, and locations go into the right calendar automatically. You'll know about a conflict before it bites you.",
    },
    {
      tag: "Drafts",
      icon: <ISpark size={18} />,
      title: "Replies drafted, waiting for you",
      desc: "RSVPs, confirmations, follow-ups — written in your voice. Nothing goes out until you say yes.",
    },
    {
      tag: "Co-parent",
      icon: <IUsers size={18} />,
      title: "Coordinate without copy-paste",
      desc: "Your co-parent gets the soccer schedule, not your whole inbox. You control what they see — and you can take it back any time.",
    },
  ];

  return (
    <section id="features" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">What it does</span>
          <h2>
            Fewer things to track.
            <br />
            Fewer things to forget.
          </h2>
        </div>
        <div
          className="features-grid reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 1,
            background: "var(--line)",
            border: "1px solid var(--line)",
            borderRadius: "var(--radius-lg)",
            overflow: "hidden",
          }}
        >
          {feats.map((f, i) => (
            <div
              key={i}
              style={{
                background: "var(--bg)",
                padding: 36,
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  marginBottom: 20,
                }}
              >
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: 8,
                    background: "var(--accent-soft)",
                    color: "var(--accent-ink)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {f.icon}
                </div>
                <span
                  className="mono"
                  style={{
                    fontSize: 11,
                    textTransform: "uppercase",
                    letterSpacing: "0.1em",
                    color: "var(--muted)",
                  }}
                >
                  {f.tag}
                </span>
              </div>
              <h3
                style={{
                  fontSize: "1.4rem",
                  letterSpacing: "-0.02em",
                  marginBottom: 10,
                }}
              >
                {f.title}
              </h3>
              <p
                style={{
                  fontSize: 15,
                  color: "var(--muted)",
                  lineHeight: 1.55,
                }}
              >
                {f.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Social proof
// ============================================================

function SocialProof() {
  const quotes = [
    {
      name: "Sarah K.",
      role: "Beta user · Co-parent of two",
      quote:
        "I stopped being the family secretary. The first week, it caught a school early-dismissal email I'd missed for three days.",
      avatar: "#74473B",
    },
    {
      name: "Marcus T.",
      role: "Beta user · Two-job parent",
      quote:
        "Between my shifts and the kids' schedules, I was missing things. Now everything just shows up in my calendar. It feels like cheating.",
      avatar: "#2D5A52",
    },
    {
      name: "Priya R.",
      role: "Beta user · Family of five",
      quote:
        "The WhatsApp parents-group monitoring alone is worth it. No more scrolling back through 200 messages to find practice times.",
      avatar: "#71717A",
    },
  ];
  return (
    <section
      style={{
        background: "var(--bg-soft)",
        borderTop: "1px solid var(--line)",
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Early signal</span>
          <h2>From our private beta.</h2>
          <p>
            Names changed, words verbatim. Real users from our Spring 2026 beta.
          </p>
        </div>
        <div
          className="quotes-grid reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 20,
          }}
        >
          {quotes.map((q, i) => (
            <figure
              key={i}
              style={{
                margin: 0,
                padding: 28,
                borderRadius: 12,
                background: "var(--bg-elev)",
                border: "1px solid var(--line)",
                display: "flex",
                flexDirection: "column",
                gap: 20,
              }}
            >
              <blockquote
                style={{
                  margin: 0,
                  fontSize: 16,
                  lineHeight: 1.55,
                  color: "var(--ink-2)",
                }}
              >
                "{q.quote}"
              </blockquote>
              <figcaption
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 12,
                  marginTop: "auto",
                }}
              >
                <div
                  style={{
                    width: 36,
                    height: 36,
                    borderRadius: 999,
                    background: q.avatar,
                    color: "white",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontWeight: 600,
                    fontSize: 14,
                  }}
                >
                  {q.name[0]}
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{q.name}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>
                    {q.role}
                  </div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "Can you actually read all my emails?",
      a: "We request read-only Gmail access — we can't send, delete, or change anything. Email content is processed to find events and then discarded. We only keep the basics: sender, subject, timestamp, and a one-line summary.",
    },
    {
      q: "Where does my data live?",
      a: "Your data is encrypted and stored securely. You can export or permanently delete everything from Settings — full deletion completes within 30 days.",
    },
    {
      q: "What happens to my email body? Does it get stored?",
      a: "No. Email content is processed in memory to detect events and immediately discarded. The only thing we save is the event itself (date, title, location) and a short summary — never the email body.",
    },
    {
      q: "How does co-parent sharing actually work?",
      a: "You choose which categories flow to your co-parent — school, medical, activities, whatever makes sense. They see the event details, never the original email. Revoke any time; future events stop sharing immediately.",
    },
    {
      q: "What if it gets something wrong?",
      a: "Anything we're not sure about gets flagged for your review before it touches your calendar. You correct it, and the system gets better over time. Events only land in your calendar when we're confident — or when you've approved them.",
    },
    {
      q: "When do I get access?",
      a: "We're inviting beta users in waves through Q2 2026. Founding members get a free lifetime Personal plan and direct line to the team.",
    },
  ];
  return (
    <section id="faq" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="section-head reveal">
          <span className="eyebrow">FAQ</span>
          <h2>
            Reasonable questions.
            <br />
            Honest answers.
          </h2>
        </div>
        <div className="reveal" style={{ borderTop: "1px solid var(--line)" }}>
          {items.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%",
                    textAlign: "left",
                    padding: "20px 0",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 24,
                    fontSize: 17,
                    fontWeight: 500,
                    color: "var(--ink)",
                  }}
                >
                  <span>{item.q}</span>
                  <span
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      width: 28,
                      height: 28,
                      borderRadius: 999,
                      border: "1px solid var(--line-strong)",
                      transition: "transform 0.25s ease",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                      flexShrink: 0,
                    }}
                  >
                    <IPlus size={14} />
                  </span>
                </button>
                <div
                  style={{
                    maxHeight: isOpen ? 240 : 0,
                    overflow: "hidden",
                    transition: "max-height 0.3s ease, padding 0.3s ease",
                    paddingBottom: isOpen ? 20 : 0,
                    fontSize: 15,
                    color: "var(--muted)",
                    lineHeight: 1.6,
                    paddingRight: 52,
                  }}
                >
                  {item.a}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, HowItWorks, Features, SocialProof, FAQ });
