// ============================================================
// Hattie — Page sections
// ============================================================

/* ---------- Hero ---------- */

const Hero = () => (
  <section className="hero" id="top">
    <div className="container">
      <div className="hero__grid">
        <div className="hero__copy">
          <div className="hero__eyebrow">
            <Badge>5 founding partners · 3 spots left</Badge>
          </div>
          <h1 className="t-display-xl hero__title">
            Aircover, pricing, guest replies.<br/>Handled before they cost you.
          </h1>
          <p className="t-subhead hero__sub">
            Files Aircover claims. Monitors comps and drops prices. Drafts guest replies. Nothing ships without your approval.
          </p>
          <div className="hero__ctas">
            <WaitlistButton size="lg" iconAfter="arrow-right">Join the waitlist</WaitlistButton>
            <a className="btn btn--secondary btn--lg" href="#workflows">See how it works</a>
          </div>
          <div className="hero__footnote">
            <Icon name="circle-dot" size={10} style={{ color: "var(--ink-tertiary)" }}/>
            <span>3 of 5 founding slots left.</span>
            <span className="dot"/>
            <span>Concierge while we build.</span>
          </div>
        </div>
        <div className="hero__visual">
          <div className="hero__phone-wrap">
            <div className="hero-eyebrow-chip">
              <span className="hero-eyebrow-chip__dot"/>
              Daily morning brief
            </div>
            <HeroPhone/>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Problem ---------- */

const Problem = () => (
  <section className="section" id="problem">
    <div className="container">
      <header className="section-head">
        <div className="section-head__eyebrow t-eyebrow">The slip-ups that cost the most</div>
        <h2 className="t-display-md section-head__title">Your VAs handle the volume. They miss the ones that hit your P&amp;L.</h2>
      </header>

      <div className="problem__grid">
        <article className="cost-card">
          <div className="cost-card__index">01 / Aircover</div>
          <h3 className="cost-card__title">Unfiled Aircover claims.</h3>
          <p className="cost-card__body">Cleaner reports a broken lamp. Nobody files. Two weeks later it's too late.</p>
          <div className="cost-card__cost">
            <div className="cost-card__cost-amount">$200 you ate.</div>
            <div className="cost-card__cost-label">Replacement lamp. Aircover window missed.</div>
          </div>
        </article>

        <article className="cost-card">
          <div className="cost-card__index">02 / Pricing</div>
          <h3 className="cost-card__title">Price drops noticed too late.</h3>
          <p className="cost-card__body">Calendar's empty for the next two weeks and you're 20% above comps. Nobody adjusted.</p>
          <div className="cost-card__cost">
            <div className="cost-card__cost-amount">Three nights of revenue, gone.</div>
            <div className="cost-card__cost-label">Per unit. Per cycle. Compounding.</div>
          </div>
        </article>

        <article className="cost-card">
          <div className="cost-card__index">03 / Guest replies</div>
          <h3 className="cost-card__title">Guest messages that sit.</h3>
          <p className="cost-card__body">A question at 14:23. Answered at 18:40. The review mentions response time.</p>
          <div className="cost-card__cost">
            <div className="cost-card__cost-amount">One 4-star review.</div>
            <div className="cost-card__cost-label">It rolls. It compounds. It costs you bookings.</div>
          </div>
        </article>
      </div>

      <p className="problem__footnote">Your VAs do most of the work. They miss the ones that cost the most.</p>
    </div>
  </section>
);

/* ---------- Three workflows ---------- */

const Workflow = ({ eyebrow, title, body, mockup, panelClass }) => (
  <article className="workflow-row">
    <div className="workflow-row__copy">
      <div className="workflow-row__eyebrow">{eyebrow}</div>
      <h3 className="workflow-row__title">{title}</h3>
      <p className="workflow-row__body">{body}</p>
    </div>
    <div className={`workflow-row__panel ${panelClass || ""}`}>
      <div className="workflow-row__mockup">{mockup}</div>
    </div>
  </article>
);

const ThreeWorkflows = () => (
  <section className="workflows" id="workflows">
    <div className="container">
      <header className="section-head section-head--center">
        <div className="section-head__eyebrow t-eyebrow">What Hattie does</div>
        <h2 className="t-display-md section-head__title">The three workflows.</h2>
        <p className="t-body-lg section-head__body">
          Three things that move the money. Hattie files, pushes, and sends. You approve.
        </p>
      </header>

      <div className="workflows__list">
        <Workflow
          eyebrow="Aircover claims"
          title="Files claims the second damage shows up."
          body="Your cleaner sends a photo. Hattie drafts the Aircover claim, files it as co-host on your approval, and chases support until the refund lands."
          mockup={<SnippetAircover/>}
          panelClass="workflow-row__panel--wa"
        />
        <Workflow
          eyebrow="Pricing"
          title="Watches your Airbnb comps every day."
          body="Tracks comparable Airbnb listings within half a mile. When you're priced above the market and the calendar's empty, Hattie proposes the drop and pushes to your PMS on approval."
          mockup={<SnippetPricing/>}
          panelClass="workflow-row__panel--cream"
        />
        <Workflow
          eyebrow="Guest replies"
          title="Catches Airbnb messages that sit past 15 minutes."
          body="When a guest's Airbnb message goes 15 minutes unanswered, Hattie drafts a reply from your SOP and waits for your tap. Catches what your VAs and guest-AI tools miss."
          mockup={<SnippetGuestReply/>}
          panelClass="workflow-row__panel--airbnb"
        />
      </div>
    </div>
  </section>
);

/* ---------- Slack section ---------- */

const SlackSection = () => (
  <section className="section section--slack" id="slack">
    <div className="container container--narrow slack-section__inner">
      <header className="section-head section-head--center">
        <div className="section-head__eyebrow t-eyebrow">Or in your team's Slack</div>
        <h2 className="t-display-md section-head__title">If your ops live in Slack, that's where the brief lives.</h2>
        <p className="t-body-lg section-head__body">
          Same brief, same approvals, native to your workspace. WhatsApp and Slack run side by side. Pick one per teammate.
        </p>
      </header>
      <SlackThread/>
    </div>
  </section>
);

/* ---------- Lives in your stack ---------- */
/*
  Nine tiles spaced 40° apart around the center, clockwise from top.
  Order: PMS (top), PMS, Co-host, PMS, PMS, Ops, Ops, Comps, Comps.
  Positions = (50% + r·sin θ, 50% − r·cos θ) with r = 38%.
*/
const STACK_TILES = [
  { name: "Hostaway",      sub: "PMS",         top: "12.0%", left: "50.0%" },
  { name: "Hospitable",    sub: "PMS",         top: "20.9%", left: "74.4%" },
  { name: "Airbnb",        sub: "Co-host",     top: "43.4%", left: "87.4%" },
  { name: "Guesty",        sub: "PMS",         top: "69.0%", left: "82.9%" },
  { name: "Smoobu",        sub: "PMS",         top: "85.7%", left: "63.0%" },
  { name: "Google Sheets", sub: "Ops",         top: "85.7%", left: "37.0%" },
  { name: "Turno",         sub: "Cleanings",   top: "69.0%", left: "17.1%" },
  { name: "Wheelhouse",    sub: "Comps data",  top: "43.4%", left: "12.6%" },
  { name: "AirDNA",        sub: "Comps data",  top: "20.9%", left: "25.6%" },
];

const LivesInStack = () => (
  <section className="stack" id="stack">
    <div className="container">
      <div className="stack__inner">
        <header className="section-head section-head--center">
          <div className="section-head__eyebrow t-eyebrow">Lives in your stack</div>
          <h2 className="t-display-md section-head__title">No new dashboard. No new tab.</h2>
          <p className="t-body-lg section-head__body">
            Hattie plugs into the tools you already run on. She reads from them, drafts from them, and pushes back to them on your approval.
          </p>
        </header>

        <div className="stack__ring" role="img" aria-label="Hattie connects to Hostaway, Guesty, Hospitable, Smoobu, AirDNA, Wheelhouse, Turno, Google Sheets, and Airbnb as co-host.">
          <div className="stack__center">
            <span className="stack__center-h">h</span>
            <span className="stack__center-label">Hattie</span>
          </div>

          {STACK_TILES.map((t, i) => (
            <div
              key={t.name}
              className="stack__tile"
              style={{
                top: t.top,
                left: t.left,
              }}
            >
              <span className="stack__tile-sub">{t.sub}</span>
              <span className="stack__tile-name">{t.name}</span>
            </div>
          ))}
        </div>

        <p className="stack__caption">Delivered via WhatsApp or Slack.</p>
      </div>
    </div>
  </section>
);

/* ---------- Approval promise ---------- */

const ApprovalPromise = () => (
  <section className="approval" id="approval">
    <div className="container">
      <div className="approval__inner">
        <div className="t-eyebrow" style={{ marginBottom: 16 }}>The approval promise</div>
        <h2 className="t-display-md approval__title">Nothing happens without your approval.</h2>
        <p className="approval__body">
          Every external action — every cleaner message, every Aircover filing, every price push, every guest reply — waits for you. The morning brief shows what's pending. One tap to approve, edit, or reject. <strong>Trust is earned, not assumed.</strong>
        </p>

        <div className="approval__rules">
          <div className="approval__rule">
            <div className="approval__rule-icon"><Icon name="message-square" size={16}/></div>
            <h4 className="approval__rule-title">Guest replies</h4>
            <p className="approval__rule-body">Drafted, never sent without your tap.</p>
          </div>
          <div className="approval__rule">
            <div className="approval__rule-icon"><Icon name="dollar" size={16}/></div>
            <h4 className="approval__rule-title">Price changes</h4>
            <p className="approval__rule-body">Proposed, never pushed without your tap.</p>
          </div>
          <div className="approval__rule">
            <div className="approval__rule-icon"><Icon name="alert" size={16}/></div>
            <h4 className="approval__rule-title">Aircover filings</h4>
            <p className="approval__rule-body">Drafted with photos, filed only on approval.</p>
          </div>
          <div className="approval__rule">
            <div className="approval__rule-icon"><Icon name="broom" size={16}/></div>
            <h4 className="approval__rule-title">Cleaner messages</h4>
            <p className="approval__rule-body">Coordinated, but a human always confirms.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Founding partners ---------- */

const FoundingPartners = () => (
  <section className="founders" id="founders">
    <div className="container">
      <div className="founders__inner">
        <div className="founders__eyebrow t-eyebrow">Cohort 01 · Concierge MVP</div>
        <h2 className="t-display-md founders__title">5 founding partners. 3 spots left.</h2>
        <p className="founders__body">
          While we build, we run the workflows for you, by hand. You see the value before any code ships. In exchange we get to learn what catches matter most for your business. Cohort 1 closes once five PMs are in.
        </p>
        <p className="founders__body" style={{ marginTop: 0 }}>
          <strong style={{ color: "var(--ink)", fontWeight: 500 }}>Free for founding partners. $10 per property per month after.</strong>
        </p>
        <div className="founders__cta">
          <WaitlistButton size="lg" iconAfter="arrow-right">Join the waitlist</WaitlistButton>
        </div>
        <div className="founders__sub">Tell us your stack, your VAs, and the slip-up that pissed you off most this quarter.</div>
      </div>
    </div>
  </section>
);

/* ---------- FAQ ---------- */

const faqs = [
  {
    q: "Does Hattie work with my PMS?",
    a: "Hostaway, Guesty, Hospitable, and Smoobu in V1. Others by request. If your stack is something else, tell us in the waitlist form and we'll prioritize based on the cohort."
  },
  {
    q: "What about my VAs? Does Hattie replace them?",
    a: "No. They do the work. Hattie catches what they miss. The volume stays with your team: guest welcome messages, check-in coordination, recurring scheduling. Hattie handles the high-stakes calls that move money: Aircover filings, price drops, ignored guest threads."
  },
  {
    q: "How do you handle our Airbnb account?",
    a: "Standard Airbnb co-host model. Credentials are stored encrypted at rest and only used by Hattie to file claims, push rates through your PMS, or read what's needed. You can revoke access at any time."
  },
  {
    q: "What does it cost?",
    a: "Free for founding partners during Cohort 1, while we build alongside you. $10 per property per month for everyone after. Founding partners keep that locked in forever."
  },
  {
    q: "What if a guest's message is private or sensitive?",
    a: "Mark properties or threads as no-AI. The brief still surfaces them so nothing slips, but Hattie doesn't draft. They go straight to you. Sensitive categories (refund disputes, safety, legal threats) auto-escalate by default."
  },
  {
    q: "Who's behind Hattie?",
    a: <>Built by <a href="https://www.linkedin.com/in/nikoladomazet/" target="_blank" rel="noopener">Nikola Domazet</a>, in close conversation with property managers about how their VAs actually work. Solo for now, on purpose — the first cohort should feel like working with a person, not a vendor.</>
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container container--narrow">
        <header className="section-head section-head--center">
          <div className="section-head__eyebrow t-eyebrow">FAQ</div>
          <h2 className="t-display-md section-head__title">Real questions, straight answers.</h2>
        </header>
        <div className="faq__list">
          {faqs.map((item, i) => (
            <div className="faq__row" key={i} data-open={open === i}>
              <button
                className="faq__q"
                aria-expanded={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <span>{item.q}</span>
                <span className="faq__icon"><Icon name="plus" size={20}/></span>
              </button>
              <div className="faq__a">
                <div className="faq__a-inner">{item.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Closing CTA banner ---------- */

const ClosingCTA = () => (
  <section className="section">
    <div className="container">
      <div className="cta-banner">
        <div>
          <h2 className="t-display-md cta-banner__title">3 of 5 founding slots left.</h2>
          <p className="cta-banner__sub">Concierge while we build. $10 per property per month after, locked in forever.</p>
        </div>
        <div className="cta-banner__actions">
          <WaitlistButton size="lg" variant="primary" onDark iconAfter="arrow-right">Join the waitlist</WaitlistButton>
          <div className="cta-banner__sub-line">No demo to book. No call to schedule.</div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  Hero, Problem, ThreeWorkflows, SlackSection, LivesInStack,
  ApprovalPromise, FoundingPartners, FAQ, ClosingCTA,
});