/* free-poa.jsx — /free-poa landing page
 * The highest-priority Phase 1 page (KD 2, TP 50K).
 * Reuses TopBar, Footer, GeneratorWidget, TrustRow, Icon, POA_TYPES, US_STATES.
 */

function FPHero() {
  return (
    <section style={{ paddingTop: 'var(--s-10)', paddingBottom: 'var(--s-11)', position: 'relative', overflow: 'hidden' }}>
      <div className="cream-grid" style={{ position: 'absolute', inset: 0, opacity: 0.6, pointerEvents: 'none' }}/>
      <div className="container" style={{ position: 'relative' }}>
        <nav aria-label="Breadcrumb" style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 'var(--s-6)', display: 'flex', gap: 8, alignItems: 'center' }}>
          <a href="index.html" style={{ color: 'var(--muted)', textDecoration: 'none' }}>Home</a>
          <Icon name="chevR" size={12}/>
          <span style={{ color: 'var(--ink)', fontWeight: 600 }}>Free POA</span>
        </nav>
        <div className="fp-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 'var(--s-10)', alignItems: 'center' }}>
          <div>
            <div className="pill lime" style={{ fontSize: 11, padding: '6px 12px', marginBottom: 'var(--s-5)' }}>FREE · NO SIGNUP · NO WATERMARK</div>
            <h1 className="display" style={{ marginBottom: 'var(--s-5)' }}>
              The free Power of Attorney form, for real this time.
            </h1>
            <p className="lede" style={{ marginBottom: 'var(--s-7)' }}>
              LegalZoom charges $39+/mo. Rocket Lawyer charges $40+/mo. We don't. Build a state-specific POA in 5 minutes, download a clean PDF, and notarize when you're ready — for free, with no email gate.
            </p>
            <TrustRow items={[
              '100% free',
              'All 50 states',
              'No subscription, ever',
              'Updated 2026',
            ]}/>
          </div>
          <div id="generator">
            <GeneratorWidget mode="hero"/>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1040px) {
          .fp-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FPComparison() {
  const rows = [
    ['Free, no signup', true, false, true],
    ['Subscription required', false, true, false],
    ['State-specific (all 50)', true, true, false],
    ['Personalized to you', true, true, false],
    ['No watermark on output', true, false, true],
    ['Notary handoff included', true, true, false],
  ];
  const cols = ['POA Forms', 'LegalZoom / Rocket Lawyer', 'Print-and-fill PDFs'];
  return (
    <section className="section" id="why" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)' }}>§01 — Why our generator is different</div>
        <h2 style={{ marginBottom: 'var(--s-9)', maxWidth: '20ch' }}>The honest comparison.</h2>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: 0, minWidth: 720 }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left', padding: '16px 18px', fontFamily: 'Outfit', fontWeight: 600, fontSize: 14, letterSpacing: '-0.01em', borderBottom: '1.5px solid var(--ink)' }}></th>
                {cols.map((c, i) => (
                  <th key={i} style={{
                    textAlign: 'left', padding: '16px 18px',
                    fontFamily: 'Outfit', fontWeight: 700, fontSize: 16, letterSpacing: '-0.015em',
                    background: i === 0 ? 'var(--ink)' : 'transparent',
                    color: i === 0 ? 'var(--accent)' : 'var(--ink)',
                    borderBottom: '1.5px solid var(--ink)',
                    borderTopLeftRadius: i === 0 ? 12 : 0,
                    borderTopRightRadius: i === 0 ? 12 : 0,
                  }}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td style={{ padding: '14px 18px', borderBottom: '1px solid var(--line-cream)', fontWeight: 600, fontSize: 14 }}>{r[0]}</td>
                  {r.slice(1).map((v, j) => (
                    <td key={j} style={{
                      padding: '14px 18px', borderBottom: '1px solid var(--line-cream)',
                      background: j === 0 ? 'rgba(14,14,12,0.92)' : 'transparent',
                      color: j === 0 ? 'var(--paper)' : 'var(--ink)',
                    }}>
                      {v
                        ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
                            <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent)', color: 'var(--ink)', display: 'inline-grid', placeItems: 'center', border: '1.5px solid var(--ink)' }}>
                              <Icon name="check" size={12}/>
                            </span>
                            Yes
                          </span>
                        : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 500, color: j === 0 ? 'rgba(245,241,232,0.6)' : 'var(--muted)' }}>
                            <span style={{ width: 22, height: 22, borderRadius: '50%', border: '1.5px solid currentColor', display: 'inline-grid', placeItems: 'center' }}>
                              <Icon name="x" size={10}/>
                            </span>
                            No
                          </span>
                      }
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function FPHowItWorks() {
  const steps = [
    { n: '01', title: 'Pick state &amp; type', body: 'Tap your state on the map (or use the dropdown). Pick Durable, Medical, General, or Limited.' },
    { n: '02', title: 'Fill in details', body: 'About 5 minutes of plain-language questions. Auto-saves to your browser.' },
    { n: '03', title: 'Download &amp; notarize', body: 'Get a clean PDF + Word file. Notarize online with BlueNotary ($25) or take it to a local notary.' },
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)' }}>§02 — How it works</div>
        <h2 style={{ marginBottom: 'var(--s-9)' }}>Three steps. No account.</h2>
        <div className="hiw-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--s-6)' }}>
          {steps.map((s, i) => (
            <div key={i} style={{ padding: 'var(--s-7)', borderTop: '2px solid var(--ink)' }}>
              <div style={{ fontFamily: 'Outfit', fontWeight: 700, fontSize: 56, lineHeight: 1, marginBottom: 'var(--s-5)', letterSpacing: '-0.04em' }}>{s.n}</div>
              <h3 style={{ marginBottom: 12, maxWidth: '18ch' }} dangerouslySetInnerHTML={{ __html: s.title }}/>
              <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.55, maxWidth: '32ch' }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .hiw-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function FPUseCases() {
  const cases = [
    { kicker: 'Aging parent', title: 'You\u2019re helping a parent manage finances.', body: 'A Durable POA lets you pay bills, manage retirement accounts, and handle medical insurance — even if Mom or Dad later loses capacity.' },
    { kicker: 'Travel · deployment', title: 'You\u2019ll be unreachable for weeks or months.', body: 'A General or Limited POA lets a trusted person sign tax forms, close on real estate, or handle an HR matter while you\u2019re overseas.' },
    { kicker: 'Surgery · ICU', title: 'You want a clear voice if something goes wrong.', body: 'A Medical POA names who decides about treatment if you can\u2019t speak. Pair with a Living Will to also document what you\u2019d want.' },
    { kicker: 'Real estate', title: 'You can\u2019t make it to closing in person.', body: 'A Limited POA empowers your spouse or attorney to sign closing docs on your behalf for that single transaction — no broader authority.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)' }}>§03 — When you actually need a POA</div>
        <h2 style={{ marginBottom: 'var(--s-9)', maxWidth: '20ch' }}>Four common situations, four different forms.</h2>
        <div className="uc-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-5)' }}>
          {cases.map((c, i) => (
            <div key={i} className="card shadowed" style={{ padding: 'var(--s-7)' }}>
              <div className="eyebrow" style={{ marginBottom: 8, color: 'var(--muted)' }}>{c.kicker}</div>
              <h3 style={{ marginBottom: 12 }}>{c.title}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.55 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .uc-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function FPTypes() {
  return (
    <section className="section" id="types" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)', color: 'rgba(245,241,232,0.5)' }}>
          <span style={{ background: 'var(--ink)' }}>§04 — The 7 POA types</span>
        </div>
        <h2 style={{ maxWidth: '20ch', marginBottom: 'var(--s-9)' }}>Each one solves a different problem.</h2>
        <div className="types-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {POA_TYPES.map((t, i) => (
            <a key={t.id} href="#" className="type-card" style={{
              border: '1.5px solid rgba(245,241,232,0.2)', borderRadius: 'var(--r-lg)',
              padding: 'var(--s-6)', textDecoration: 'none', color: 'var(--paper)',
              display: 'flex', flexDirection: 'column', minHeight: 200, transition: 'all 150ms ease',
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--accent)', color: 'var(--ink)', display: 'grid', placeItems: 'center', fontFamily: 'Outfit', fontWeight: 700, fontSize: 13, marginBottom: 12 }}>0{i+1}</div>
              <h4 style={{ fontFamily: 'Outfit', fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>{t.name}</h4>
              <p style={{ fontSize: 13, color: 'rgba(245,241,232,0.7)', lineHeight: 1.5, flex: 1 }}>{t.blurb}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: 'var(--accent)', marginTop: 12 }}>
                Build {t.name}
                <Icon name="arrow" size={12}/>
              </div>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .type-card:hover { background: rgba(201,243,106,0.08); border-color: var(--accent) !important; }
        @media (max-width: 1080px) { .types-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px)  { .types-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function FPStateRequirements() {
  const featured = ['CA','TX','FL','NY','IL','PA','OH','GA'];
  return (
    <section className="section" id="states">
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)' }}>§05 — State requirements at a glance</div>
        <div className="state-head" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--s-9)', alignItems: 'flex-end', marginBottom: 'var(--s-8)' }}>
          <div>
            <h2 style={{ marginBottom: 'var(--s-5)', maxWidth: '20ch' }}>
              Most states (47) <span style={{ background: 'var(--accent)', padding: '0 6px' }}>require notarization</span> for the POA to be enforceable.
            </h2>
            <p className="lede">Witness rules, statutory short forms, and online-notarization eligibility vary by state. We bake every state's rules into the generator — and surface them clearly on each state page.</p>
          </div>
        </div>
        <div className="state-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 'var(--s-6)' }}>
          {featured.map(code => {
            const name = (US_STATES.find(s => s[0] === code) || [])[1];
            return (
              <a key={code} href="#" style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '14px 16px', border: '1.5px solid var(--ink)',
                borderRadius: 'var(--r-md)', background: 'var(--surface)',
                textDecoration: 'none', color: 'var(--ink)', fontWeight: 600, fontSize: 15,
              }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--paper-2)', display: 'grid', placeItems: 'center', fontFamily: 'Outfit', fontWeight: 700, fontSize: 12, border: '1px solid var(--ink)' }}>{code}</span>
                  {name}
                </span>
                <Icon name="chevR" size={14}/>
              </a>
            );
          })}
        </div>
        <a href="#" className="btn ghost" style={{ borderColor: 'var(--ink)' }}>
          Browse all 50 states <Icon name="arrow" size={16}/>
        </a>
      </div>
      <style>{`
        @media (max-width: 960px) { .state-head { grid-template-columns: 1fr !important; } .state-cards { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 520px) { .state-cards { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function FPFaq() {
  const items = [
    { q: 'Is this really free?', a: 'Yes. The generator and PDF download are free, with no signup, no watermark, and no subscription. We make money only when people optionally choose to notarize online with BlueNotary ($25). If you don\u2019t need notarization, you\u2019ll never pay us a cent.' },
    { q: 'Will it hold up in court?', a: 'Forms use current statutory language for your state. As long as it\u2019s signed and notarized/witnessed per your state\u2019s rules, it\u2019s legally valid. We\u2019re not a law firm \u2014 for complex situations talk to an attorney.' },
    { q: 'Do I need a notary?', a: '47 of 50 states require POAs to be notarized to be enforceable. We tell you exactly what your state needs at the end of the flow.' },
    { q: 'What about witnesses?', a: '24 states also require one or two witnesses (in addition to the notary). The generator handles this for you per state.' },
    { q: 'How long is a POA valid?', a: 'A Durable POA is valid until you revoke it, become legally incapacitated (for non-Durable types), or die. You can revoke it at any time you\u2019re competent.' },
    { q: 'Can I have more than one agent?', a: 'Yes. You can name co-agents (who must agree) or successor agents (who step in if the first can\u2019t serve). The generator walks you through both.' },
    { q: 'What\u2019s the difference between a POA and a Living Will?', a: 'A POA names who decides for you. A Living Will documents what you want decided about end-of-life care. Most people pair a Medical POA with a Living Will.' },
    { q: 'Is POA Forms a government site?', a: 'No. POA Forms is a free tool. The .us domain is open to U.S. residents and businesses; we use it to indicate we serve the U.S. We\u2019re not a government agency \u2014 we\u2019re a free service built by BlueNotary.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)' }}>§06 — Frequently asked</div>
        <div className="faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 'var(--s-9)', alignItems: 'flex-start' }}>
          <div>
            <h2 style={{ marginBottom: 'var(--s-5)', maxWidth: '12ch' }}>Quick answers.</h2>
            <p className="lede">Eight of the most common questions we get about free POAs.</p>
          </div>
          <div>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderTop: i === 0 ? '1.5px solid var(--ink)' : 'none', borderBottom: '1.5px solid var(--ink)' }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}
                    style={{ width: '100%', textAlign: 'left', background: 'transparent', border: 'none', padding: '20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--ink)' }}>
                    <span style={{ fontFamily: 'Outfit', fontWeight: 600, fontSize: 19, letterSpacing: '-0.01em' }}>{it.q}</span>
                    <span style={{ width: 30, height: 30, borderRadius: '50%', background: isOpen ? 'var(--accent)' : 'var(--paper)', border: '1.5px solid var(--ink)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <Icon name={isOpen ? 'minus' : 'plus'} size={14}/>
                    </span>
                  </button>
                  {isOpen && <div style={{ paddingBottom: 24, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6, maxWidth: '64ch' }}>{it.a}</div>}
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </section>
  );
}

function FPConversion() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <section className="section">
      <div className="container">
        <div className="split-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-5)' }}>
          {/* BN funnel */}
          <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 'var(--r-2xl)', padding: 'var(--s-9)', minHeight: 380, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 16 }}>Notarize when you're ready</div>
              <h2 style={{ marginBottom: 16, color: 'var(--paper)', maxWidth: '14ch' }}>
                Notarize online — <span style={{ color: 'var(--accent)' }}>$25</span>.
              </h2>
              <p style={{ fontSize: 16, color: 'rgba(245,241,232,0.78)', maxWidth: '46ch', lineHeight: 1.55, marginBottom: 16 }}>
                Skip the post office. A licensed online notary verifies your ID, witnesses your signature, and seals your POA in about 10 minutes.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="btn bn">Notarize with BlueNotary <Icon name="arrow" size={16}/></a>
            </div>
          </div>

          {/* Email capture */}
          <div style={{ background: 'var(--accent)', color: 'var(--ink)', borderRadius: 'var(--r-2xl)', padding: 'var(--s-9)', minHeight: 380, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Soft email capture</div>
              <h2 style={{ marginBottom: 16, maxWidth: '17ch' }}>
                Want a checklist before you start?
              </h2>
              <p style={{ fontSize: 16, maxWidth: '44ch', lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 24 }}>
                Get a one-page PDF: what to gather, who to name, and the 3 questions everyone gets stuck on. We send max 1 email/week. Unsubscribe in 1 click. We never sell your data.
              </p>
            </div>
            {sent ? (
              <div style={{ background: 'var(--ink)', color: 'var(--accent)', borderRadius: 'var(--r-md)', padding: '14px 18px', fontWeight: 600 }}>
                ✓ Sent. Check your inbox.
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); if (email.includes('@')) setSent(true); }}
                style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <input className="input" type="email" placeholder="you@example.com" value={email}
                  onChange={(e) => setEmail(e.target.value)} required
                  style={{ flex: 1, minWidth: 200 }}/>
                <button className="btn" type="submit" style={{ background: 'var(--ink)', color: 'var(--accent)' }}>
                  Email me the checklist
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .split-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function FreePoa() {
  return (
    <>
      <TopBar active="free-poa"/>
      <FPHero/>
      <FPComparison/>
      <FPHowItWorks/>
      <FPUseCases/>
      <FPTypes/>
      <FPStateRequirements/>
      <FPFaq/>
      <FPConversion/>
      <Footer/>
    </>
  );
}

window.FreePoa = FreePoa;
