/* home.jsx — Homepage for powerofattorneyforms.us */

function Hero() {
  return (
    <section style={{
      position: 'relative',
      paddingTop: 'var(--s-10)',
      paddingBottom: 'var(--s-11)',
      overflow: 'hidden',
    }}>
      {/* Decorative cream grid background */}
      <div className="cream-grid" style={{
        position: 'absolute', inset: 0, opacity: 0.6, pointerEvents: 'none',
      }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1.2fr', gap: 'var(--s-10)', alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 'var(--s-5)' }}>
              <span className="pill lime" style={{ fontSize: 11, padding: '6px 12px' }}>FREE · NO SIGNUP · NO WATERMARK</span>
            </div>
            <h1 className="display" style={{ marginBottom: 'var(--s-5)' }}>
              Build a Power of Attorney<br/>
              in <span style={{
                position: 'relative', display: 'inline-block',
              }}>
                <span style={{ position: 'relative', zIndex: 1 }}>5 minutes</span>
                <span style={{
                  position: 'absolute', left: '-4px', right: '-4px', bottom: 4, height: '38%',
                  background: 'var(--accent)', zIndex: 0, borderRadius: 4,
                }}/>
              </span>.
            </h1>
            <p className="lede" style={{ marginBottom: 'var(--s-7)' }}>
              State-specific. Plain language. Free forever — no upsell traps. Pick your state and POA type below; we'll generate a clean PDF you can sign, notarize, and use today.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 'var(--s-6)' }}>
              <a href="#generator" className="btn primary large">
                Start with my state
                <Icon name="arrow" size={18}/>
              </a>
              <a href="#how" className="btn ghost large" style={{ borderColor: 'var(--ink)' }}>
                <span aria-hidden="true" style={{
                  width: 22, height: 22, borderRadius: '50%', background: 'var(--ink)', color: 'var(--accent)',
                  display: 'grid', placeItems: 'center', fontSize: 10,
                }}>▶</span>
                Watch 60-sec demo
              </a>
            </div>
            <TrustRow items={[
              '100% free',
              'No signup, no watermark',
              'Updated 2026 statutes',
            ]}/>
          </div>

          <div id="generator">
            <GeneratorWidget mode="hero"/>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1040px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ComparisonSection() {
  const cols = [
    {
      title: 'POA Forms',
      sub: 'powerofattorneyforms.us',
      highlight: true,
      items: [
        ['Free, no signup', true],
        ['State-specific (all 50)', true],
        ['No watermark on PDF', true],
        ['Notarize for $25 if needed', true],
        ['No subscription, ever', true],
      ],
    },
    {
      title: 'LegalZoom · Rocket Lawyer',
      sub: 'subscription tools',
      items: [
        ['$39–40/mo subscription', false],
        ['Signup wall before download', false],
        ['Upsells throughout flow', false],
        ['Notary often extra cost', false],
        ['Cancel-flow friction', false],
      ],
    },
    {
      title: 'Print-and-fill PDFs',
      sub: 'free template sites',
      items: [
        ['Free download', true],
        ['Generic — not state-specific', false],
        ['No personalization', false],
        ['You handle every edge case', false],
        ['Easy to fill in wrong field', false],
      ],
    },
  ];
  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>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-9)', alignItems: 'end', marginBottom: 'var(--s-9)' }} className="cmp-head">
          <h2 style={{ maxWidth: '14ch' }}>The free tool that doesn't try to upsell you.</h2>
          <p className="lede" style={{ maxWidth: '50ch' }}>
            We built this because the existing options were either expensive subscription traps or generic PDFs that ignored state-specific rules. Here's how the three stack up.
          </p>
        </div>

        <div className="cmp-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--s-5)' }}>
          {cols.map((c, i) => (
            <div key={i} className="card" style={{
              background: c.highlight ? 'var(--ink)' : 'var(--surface)',
              color: c.highlight ? 'var(--paper)' : 'var(--ink)',
              boxShadow: c.highlight ? '8px 8px 0 0 var(--accent)' : 'none',
              border: c.highlight ? '1.5px solid var(--ink)' : '1.5px solid var(--ink)',
              padding: 28,
            }}>
              <div className="eyebrow" style={{ color: c.highlight ? 'var(--accent)' : 'var(--muted)', marginBottom: 4 }}>
                {c.highlight ? '← The good option' : (i === 1 ? 'The expensive one' : 'The generic one')}
              </div>
              <h3 style={{ marginBottom: 4 }}>{c.title}</h3>
              <div style={{ fontSize: 13, opacity: 0.7, marginBottom: 24 }}>{c.sub}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                {c.items.map(([label, ok], j) => (
                  <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, fontWeight: 500 }}>
                    <span style={{
                      width: 22, height: 22, flexShrink: 0,
                      borderRadius: '50%',
                      background: ok ? 'var(--accent)' : 'transparent',
                      border: ok ? '1.5px solid var(--ink)' : `1.5px solid ${c.highlight ? 'var(--paper)' : 'var(--ink)'}`,
                      color: ok ? 'var(--ink)' : (c.highlight ? 'var(--paper)' : 'var(--ink)'),
                      display: 'grid', placeItems: 'center', marginTop: 1,
                    }}>
                      {ok
                        ? <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        : <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
                      }
                    </span>
                    {label}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .cmp-head { grid-template-columns: 1fr !important; gap: 16px !important; }
          .cmp-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', title: 'Pick your state and POA type', body: 'Tap your state on the map; pick Durable, Medical, General, or Limited. We pre-load the rules for that state.' },
    { n: '02', title: 'Fill in details (5 min)', body: 'Plain-language questions. Auto-save every 30 seconds — close the tab and come back, your draft waits 24 hours.' },
    { n: '03', title: 'Download. Sign. Notarize.', body: 'Get a clean PDF (and editable Word). Print, sign, and notarize — online with BlueNotary for $25 or in person.' },
  ];
  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)', maxWidth: '20ch' }}>Three steps. No account. No catches.</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)',
              position: 'relative',
            }}>
              <div style={{
                fontFamily: 'Outfit', fontWeight: 700, fontSize: 56,
                lineHeight: 1, color: 'var(--ink)', marginBottom: 'var(--s-5)',
                letterSpacing: '-0.04em',
              }}>{s.n}</div>
              <h3 style={{ marginBottom: 12, maxWidth: '18ch' }}>{s.title}</h3>
              <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.55, maxWidth: '34ch' }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .hiw-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function TypesGrid() {
  return (
    <section className="section tight" 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)' }}>§03 — POA types</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-9)', alignItems: 'end', marginBottom: 'var(--s-9)' }} className="cmp-head">
          <h2 style={{ maxWidth: '14ch' }}>7 types. Pick the one that fits.</h2>
          <p className="lede" style={{ color: 'rgba(245,241,232,0.78)', maxWidth: '46ch' }}>
            Most people need <strong style={{ color: 'var(--accent)' }}>Durable</strong> or <strong style={{ color: 'var(--accent)' }}>Medical</strong>. Not sure? The 30-second quiz inside the generator will sort you out.
          </p>
        </div>

        <div className="types-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--s-4)' }}>
          {POA_TYPES.map((t, i) => (
            <a key={t.id} href="#" className="type-card" style={{
              background: 'transparent',
              color: 'var(--paper)',
              border: '1.5px solid rgba(245,241,232,0.2)',
              borderRadius: 'var(--r-lg)',
              padding: 'var(--s-6)',
              textDecoration: 'none',
              display: 'flex', flexDirection: 'column', gap: 8,
              transition: 'all 150ms ease',
              minHeight: 200,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8,
                background: 'var(--accent)', color: 'var(--ink)',
                display: 'grid', placeItems: 'center',
                fontFamily: 'Outfit', fontWeight: 700, fontSize: 14,
                marginBottom: 4,
              }}>0{i+1}</div>
              <h4 style={{ fontFamily: 'Outfit', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{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: 13, fontWeight: 600, color: 'var(--accent)', marginTop: 8 }}>
                Build {t.name} POA
                <Icon name="arrow" size={14}/>
              </div>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .type-card:hover { background: rgba(201,243,106,0.08) !important; 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 StatePreview() {
  const featured = ['CA','TX','FL','NY','PA','IL','OH','GA'];
  return (
    <section className="section" id="states">
      <div className="container">
        <div className="doc-rule" style={{ marginBottom: 'var(--s-6)' }}>§04 — Built for all 50 states</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: '18ch' }}>
              Each state has its own rules. We handle them.
            </h2>
            <p className="lede" style={{ maxWidth: '52ch' }}>
              <strong>47 states require notarization</strong> for a POA to be enforceable. 24 require witnesses. Some states (like California) have a statutory short form. We bake all of that into the generator so you don't have to read 50 statutes.
            </p>
          </div>
          <div style={{
            border: '1.5px solid var(--ink)',
            borderRadius: 'var(--r-lg)',
            padding: 'var(--s-6)',
            background: 'var(--surface)',
            boxShadow: '6px 6px 0 0 var(--accent)',
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <div style={{ fontFamily: 'Outfit', fontWeight: 700, fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1 }}>47</div>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>states require notarization</div>
              </div>
              <div>
                <div style={{ fontFamily: 'Outfit', fontWeight: 700, fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1 }}>24</div>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>require witnesses too</div>
              </div>
            </div>
            <hr className="rule" style={{ margin: '16px 0' }}/>
            <div style={{ fontSize: 13, color: 'var(--muted)' }}>
              Last verified against statutes: <strong style={{ color: 'var(--ink)' }}>Jan 2026</strong>
            </div>
          </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: '16px 18px',
                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 FAQ() {
  const items = [
    { q: 'Is this really free? What\u2019s the catch?', a: 'No catch. The generator and PDF download are free, with no signup, no watermark, and no subscription. We make money when people optionally choose to notarize online with BlueNotary ($25). If you don\u2019t need notarization \u2014 or you go to a local notary \u2014 you\u2019ll never pay us a cent.' },
    { q: 'Will the form hold up in court?', a: 'Forms are generated against current state statutes (last verified Jan 2026) using the statutory language each state requires. As long as it\u2019s signed, witnessed, and/or notarized per your state\u2019s rules, it\u2019s legally valid. POA Forms is an informational tool, not a law firm \u2014 for complex situations (large estates, contested family) 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, and offer online notarization for $25 if you want it.' },
    { q: 'What happens to my data?', a: 'Drafts are encrypted with AES-256 and auto-delete from our servers 1 hour after you finish. We don\u2019t require an account, don\u2019t sell data, and don\u2019t run ad retargeting.' },
    { q: 'Can I revoke my POA later?', a: 'Yes \u2014 a POA can be revoked any time you\u2019re mentally competent. We\u2019ll generate a free revocation form whenever you need one.' },
    { q: 'Is POA Forms a government site?', a: 'No. The .us domain is open to U.S. residents and businesses; we use it to signal we serve U.S. residents. We are not a government agency. We\u2019re a free tool built by BlueNotary, a U.S.-based notarization company.' },
  ];
  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)' }}>§05 — Questions you probably have</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">If you have a question we don't cover, we'll route you to the right state-specific guide.</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 ConversionSplit() {
  return (
    <section className="section">
      <div className="container">
        <div className="split-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-5)' }}>
          {/* Left — BlueNotary funnel */}
          <div style={{
            background: 'var(--ink)', color: 'var(--paper)',
            borderRadius: 'var(--r-2xl)', padding: 'var(--s-9)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 360, position: 'relative', overflow: 'hidden',
          }}>
            <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> with BlueNotary.
              </h2>
              <p style={{ fontSize: 16, color: 'rgba(245,241,232,0.78)', maxWidth: '46ch', marginBottom: 24, lineHeight: 1.55 }}>
                Skip the post office. A licensed online notary verifies your ID, witnesses your signature, and seals your POA in about 10 minutes. Available 24/7 across the U.S.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="#" className="btn bn">
                Notarize with BlueNotary
                <Icon name="arrow" size={16}/>
              </a>
              <span style={{ fontSize: 13, color: 'rgba(245,241,232,0.6)' }}>Avg. 10 min · Available 24/7</span>
            </div>
            <span aria-hidden="true" style={{
              position: 'absolute', right: -40, bottom: -40, width: 200, height: 200,
              borderRadius: '50%', border: '1.5px solid var(--accent)', opacity: 0.4,
            }}/>
            <span aria-hidden="true" style={{
              position: 'absolute', right: -10, bottom: -10, width: 140, height: 140,
              borderRadius: '50%', border: '1.5px solid var(--accent)', opacity: 0.6,
            }}/>
          </div>

          {/* Right — Browse */}
          <div style={{
            background: 'var(--accent)', color: 'var(--ink)',
            borderRadius: 'var(--r-2xl)', padding: 'var(--s-9)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 360, position: 'relative', overflow: 'hidden',
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Or — keep exploring</div>
              <h2 style={{ marginBottom: 16, maxWidth: '15ch' }}>
                Browse POA types or your state.
              </h2>
              <p style={{ fontSize: 16, maxWidth: '44ch', marginBottom: 24, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
                Get the right form for your situation, with state-specific rules, statute citations, and FAQs all in one place.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#types" className="btn ghost" style={{ borderColor: 'var(--ink)', background: 'var(--paper)' }}>
                See all POA types
                <Icon name="arrow" size={16}/>
              </a>
              <a href="#states" className="btn" style={{ background: 'var(--ink)', color: 'var(--accent)' }}>
                Find my state
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .split-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function MobilePreview() {
  // Faux phone frame showing the generator on mobile — sits beside hero on wide screens
  return null;
}

function Home() {
  return (
    <>
      <TopBar active="home"/>
      <Hero/>
      <ComparisonSection/>
      <HowItWorks/>
      <TypesGrid/>
      <StatePreview/>
      <FAQ/>
      <ConversionSplit/>
      <Footer/>
    </>
  );
}

window.Home = Home;