/* global React, Icon, DashboardHero, BreakoutBox, ReserveRing, RunwayChart, AICard, Buckets, MetricCard, LogoMark */
const { useState: useS } = React;

/* ============================================================
   Product / How It Works
   ============================================================ */
function ProductPage({ go }) {
  const steps = [
    {
      title: "Connect or enter your income rhythm",
      desc: "Link accounts in seconds, or sketch your real income shape. ReservWise learns the rhythm — when invoices land, when seasons swing, when expenses cluster.",
      visual: <StepIncome/>
    },
    {
      title: "Build reserve targets that match your reality",
      desc: "Operating, tax, owner draw, growth. Set tiered targets in plain language. ReservWise funds them in priority order from every dollar that arrives.",
      visual: <StepReserves/>
    },
    {
      title: "Forecast runway and safe-to-spend",
      desc: "See exactly what you can spend this week, what stays untouched, and where the next pressure point lands — weeks before it does.",
      visual: <StepForecast/>
    },
    {
      title: "Grow from stability, not guesswork",
      desc: "When reserves are steady and runway is clear, ReservWise tells you when (and how much) you can responsibly spend on growth.",
      visual: <StepGrowth/>
    },
  ];
  return (
    <div className="page-fade-in">
      <header className="page-header">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>How it works</span>
          <h1 style={{marginTop:14}}>From unstable cashflow to disciplined growth — in four moves.</h1>
          <p className="lead">
            ReservWise replaces the spreadsheet, the side-app, and the gut feeling with one operating system. Here's how the loop runs.
          </p>
        </div>
      </header>
      <section>
        <div className="container">
          <div className="steps">
            {steps.map((s,i) => (
              <div key={i} className="step-row">
                <div className="step-num">0{i+1}</div>
                <div>
                  <div className="step-title">{s.title}</div>
                  <div className="step-desc">{s.desc}</div>
                </div>
                <div className="step-visual">{s.visual}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA go={go}/>
    </div>
  );
}

function StepIncome() {
  return (
    <svg viewBox="0 0 280 120" style={{width:"100%", maxWidth:280}}>
      <defs>
        <linearGradient id="incFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2e9143" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="#2e9143" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,1,2].map(i => (
        <line key={i} x1="0" x2="280" y1={30 + i*30} y2={30 + i*30} stroke="var(--gray-100)" strokeWidth="1"/>
      ))}
      <path d="M0 80 L30 60 L60 70 L90 30 L120 50 L150 25 L180 65 L210 40 L240 70 L280 35"
            fill="none" stroke="var(--green-600)" strokeWidth="2" strokeLinejoin="round"/>
      <path d="M0 80 L30 60 L60 70 L90 30 L120 50 L150 25 L180 65 L210 40 L240 70 L280 35 L280 120 L0 120 Z"
            fill="url(#incFill)"/>
      {[30,90,150,210].map((x,i) => (
        <circle key={i} cx={x} cy={[60,30,25,40][i]} r="3" fill="#fff" stroke="var(--green-600)" strokeWidth="2"/>
      ))}
    </svg>
  );
}
function StepReserves() {
  const buckets = [
    { name: "Operating", pct: 82, color: "var(--green-600)" },
    { name: "Tax · Q2", pct: 64, color: "var(--charcoal-800)" },
    { name: "Owner draw", pct: 48, color: "var(--green-400)" },
    { name: "Growth", pct: 30, color: "var(--green-200)" },
  ];
  return (
    <div style={{display:"flex", flexDirection:"column", gap:8, width:"100%", maxWidth:280}}>
      {buckets.map((b,i) => (
        <div key={i} style={{display:"grid", gridTemplateColumns:"90px 1fr 36px", gap:10, alignItems:"center"}}>
          <div style={{fontFamily:"var(--font-display)", fontWeight:500, fontSize:12, color:"var(--charcoal-700)"}}>{b.name}</div>
          <div style={{height:8, background:"var(--gray-100)", borderRadius:999, overflow:"hidden"}}>
            <div style={{width:b.pct+"%", height:"100%", background:b.color, borderRadius:999}}></div>
          </div>
          <div style={{textAlign:"right", fontFamily:"var(--font-display)", fontWeight:600, fontSize:11, color:"var(--charcoal-900)"}}>{b.pct}%</div>
        </div>
      ))}
    </div>
  );
}
function StepForecast() {
  return <div style={{width:"100%"}}><MetricCard label="Safe to spend" value="$4,820" sub="this week · after reserves" trend={{dir:"up", value:"+12%"}} sparkData={[3,4,4,5,4,6,5,7,6,8,7,9]}/></div>;
}
function StepGrowth() {
  return (
    <svg viewBox="0 0 240 120" style={{width:"100%", maxWidth:240}}>
      {[0,1,2,3].map(i => <rect key={i} x={20 + i*55} y={120 - (40 + i*18)} width="34" height={40 + i*18} rx="4" fill={i===3?"var(--green-600)":"var(--green-200)"}/>)}
      <path d="M30 70 L90 55 L150 38 L210 18" stroke="var(--charcoal-800)" strokeWidth="2" fill="none" strokeDasharray="4 3"/>
    </svg>
  );
}

/* ============================================================
   Features
   ============================================================ */
function FeaturesPage({ go }) {
  const blocks = [
    { tag:"01 · Reserve system", h:"Reserves before everything else.", d:"Operating, tax, owner draw, growth — funded in priority order from every dollar that lands. No more 'I'll set it aside next month.'", bullets:["Tiered, named buckets","Auto-allocation rules","Floor and ceiling targets","Visual health at a glance"], visual:<ReserveRing/> },
    { tag:"02 · Forecasting engine", h:"A 12-month forecast that bends with reality.", d:"Models your real income shape — not a smoothed average — so the runway you see is the runway you have.", bullets:["12-month rolling forecast","Past + projected on one line","Pressure points flagged early","What-if scenario sandbox"], visual:<RunwayChart/> },
    { tag:"03 · Owner draw planning", h:"Pay yourself without starving the business.", d:"Know exactly what you can pay yourself this month, this quarter, this year — and what stays in the business.", bullets:["Monthly draw recommendations","Quarterly review cadence","Tax-aware draws","Savings split rules"], visual:<MetricCard label="Owner draw available" value="$3,200" sub="next draw · May 1" trend={{dir:"up", value:"+$420"}} sparkData={[2,2,3,2,3,4,3,4,5,4,5,5]}/> },
    { tag:"04 · Tax buckets", h:"Quarterly tax pressure, absorbed in advance.", d:"Tax is set aside the moment income lands. Q1 doesn't surprise you, Q4 doesn't break you.", bullets:["State + federal estimates","Auto set-aside on income","Quarterly remit reminders","CPA-ready exports"], visual:<MetricCard label="Tax set aside · Q2" value="$4,800" sub="79% of estimated $6,080" trend={{dir:"up", value:"on pace"}}><div className="bucket-bar" style={{marginTop:14}}><div className="bucket-fill" style={{width:"79%", background:"var(--charcoal-800)"}}></div></div></MetricCard> },
    { tag:"05 · Variable income budgeting", h:"Budgets that breathe with your income.", d:"Spending plans that scale up in good months and tighten quietly in slow ones — without the panic.", bullets:["Income-band budgets","Floor / target / surplus modes","Category guardrails","Discretionary throttle"], visual:<Buckets/> },
    { tag:"06 · AI cashflow recommendations", h:"A coach, not a chatbot.", d:"Quiet intelligence that watches the pattern, flags the pressure, and proposes the next disciplined move.", bullets:["Pattern detection","Pressure forecasting","Disciplined recommendations","One-click apply"], visual:<AICard/> },
    { tag:"07 · Reports & insights", h:"Clean financial reports, ready for anyone.", d:"P&L, cashflow, owner-draw history, tax estimates. Export to your CPA without explaining anything twice.", bullets:["P&L and cashflow reports","Owner draw history","Tax estimate exports","CSV / PDF / direct CPA share"], visual:<ReportMock/> },
  ];
  return (
    <div className="page-fade-in">
      <header className="page-header">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Features</span>
          <h1 style={{marginTop:14}}>Every piece, built for entrepreneur cashflow.</h1>
          <p className="lead">A complete operating system for variable income — reserves, forecasting, tax, owner draws, AI guidance, and clean reports.</p>
        </div>
      </header>
      <section>
        <div className="container">
          {blocks.map((b,i) => (
            <div key={i} className="feature-block">
              <div className="feature-copy">
                <div className="feature-tag">{b.tag}</div>
                <h3>{b.h}</h3>
                <p className="lead" style={{marginTop:14, fontSize:17}}>{b.d}</p>
                <ul className="feature-list">
                  {b.bullets.map((x,j) => (
                    <li key={j}><span className="check"><Icon.check/></span>{x}</li>
                  ))}
                </ul>
              </div>
              <div>{b.visual}</div>
            </div>
          ))}
        </div>
      </section>
      <FinalCTA go={go}/>
    </div>
  );
}

function ReportMock() {
  return (
    <div className="card-elevated" style={{padding:20, background:"#fff"}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14}}>
        <div className="metric-label">Q1 2026 · Cashflow report</div>
        <span className="tag">Ready</span>
      </div>
      {[
        ["Revenue", "$84,200", "var(--charcoal-900)"],
        ["Operating", "−$38,400", "var(--charcoal-700)"],
        ["Tax set aside", "−$16,840", "var(--charcoal-700)"],
        ["Owner draw", "−$12,000", "var(--charcoal-700)"],
        ["Net to reserves", "+$16,960", "var(--green-600)"],
      ].map(([k,v,c],i) => (
        <div key={i} style={{display:"flex", justifyContent:"space-between", padding:"10px 0", borderTop: i ? "1px solid var(--gray-100)":"none"}}>
          <span style={{fontSize:14, color:"var(--charcoal-700)"}}>{k}</span>
          <span style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:14, color:c}}>{v}</span>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   Pricing page
   ============================================================ */
function PricingPage({ go }) {
  const [annual, setAnnual] = useS(true);
  const tiers = [
    {
      name: "Starter", monthly: 12, annual: 9,
      pitch: "For solo operators getting control of cashflow for the first time.",
      featured: false,
      features: ["Up to 2 connected accounts","3 reserve buckets","6-month forecast","Basic tax estimates","Email support"]
    },
    {
      name: "Operator", monthly: 29, annual: 23,
      pitch: "For entrepreneurs managing variable income seriously.",
      featured: true,
      features: ["Unlimited accounts","Unlimited reserve buckets","12-month rolling forecast","Owner draw planning","AI guidance (Operator)","Quarterly tax buckets","Priority support"]
    },
    {
      name: "Growth", monthly: 59, annual: 47,
      pitch: "For owners planning reserves, runway, and disciplined expansion.",
      featured: false,
      features: ["Everything in Operator","Multi-entity support","Scenario sandbox","CPA share & exports","Advanced AI guidance","Dedicated success manager","SOC 2 + audit logs"]
    },
  ];
  return (
    <div className="page-fade-in">
      <header className="page-header">
        <div className="container" style={{textAlign:"center"}}>
          <span className="eyebrow" style={{justifyContent:"center"}}><span className="dot"></span>Pricing</span>
          <h1 style={{marginTop:14, marginInline:"auto"}}>Three tiers. One discipline.</h1>
          <p className="lead" style={{marginInline:"auto"}}>Start with what fits today. Move up when the business does. Cancel any time.</p>
          <div className="toggle">
            <button className={!annual?"active":""} onClick={() => setAnnual(false)}>Monthly</button>
            <button className={annual?"active":""} onClick={() => setAnnual(true)}>Annual <span className="save-tag">SAVE 20%</span></button>
          </div>
        </div>
      </header>
      <section>
        <div className="container">
          <div className="pricing-full">
            {tiers.map((t,i) => (
              <div key={i} className={"pricing-card" + (t.featured ? " featured" : "")}>
                {t.featured && <div className="featured-badge">Most chosen</div>}
                <div className="pricing-name">{t.name}</div>
                <div className="pricing-price">
                  <span className="pricing-amount">${annual ? t.annual : t.monthly}</span>
                  <span className="pricing-period">/mo</span>
                </div>
                <div className="pricing-pitch">{t.pitch}</div>
                {annual && <div style={{fontSize:12, color:"var(--green-700)", marginTop:6, fontWeight:600}}>Billed ${t.annual*12} annually</div>}
                <a className={"btn " + (t.featured ? "btn-primary" : "btn-secondary")} style={{width:"100%", marginTop:20}} href={window.APP_URL + "/register"}>
                  Start 14-day trial
                </a>
                <div className="pricing-features">
                  {t.features.map((f,j) => (
                    <div key={j} className="pricing-feature">
                      <span className="check"><Icon.check/></span>{f}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div style={{textAlign:"center", marginTop:48, color:"var(--charcoal-500)", fontSize:14}}>
            Every plan includes bank-grade encryption, SOC 2 compliance, and a 14-day free trial. No card required.
          </div>
        </div>
      </section>
      <FinalCTA go={go}/>
    </div>
  );
}

/* ============================================================
   About / Mission
   ============================================================ */
function AboutPage({ go }) {
  return (
    <div className="page-fade-in">
      <header className="page-header">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Our mission</span>
          <h1 style={{marginTop:14}}>Built for the reality of running your own thing.</h1>
          <p className="lead">Entrepreneurs are forced into financial tools designed for employees. ReservWise is the alternative.</p>
        </div>
      </header>
      <section>
        <div className="container">
          <div className="mission-grid">
            <div>
              <h2 className="h-card" style={{fontSize:28, marginBottom:14}}>Why we exist.</h2>
              <p style={{fontSize:16, color:"var(--charcoal-700)", lineHeight:1.7}}>
                Every budgeting tool we tried assumed a paycheck. They assumed predictability.
                They assumed someone else was handling tax. They assumed the money was yours
                to spend the moment it landed.
              </p>
              <p style={{fontSize:16, color:"var(--charcoal-700)", lineHeight:1.7, marginTop:14}}>
                That's not how entrepreneurs live. So we built the operating system we
                wished existed — one that treats reserves as the foundation, runway as
                the question, and discipline as the goal.
              </p>
              <div className="mission-quote">
                "Stability is what lets you take real swings. ReservWise exists so the swing isn't the same thing as the survival."
              </div>
            </div>
            <div>
              <h2 className="h-card" style={{fontSize:28, marginBottom:14}}>What we believe.</h2>
              <div style={{display:"flex", flexDirection:"column", gap:18}}>
                {[
                  ["Reserves are the foundation.", "Cashflow without reserves is just hope with extra steps."],
                  ["Forecasts should bend.", "Smoothed averages lie. Real models match real income shapes."],
                  ["Owners deserve clarity.", "You should know what you can spend, draw, save, and grow from — every week."],
                  ["AI should be quiet.", "A coach, not a chatbot. Specific moves, not vague encouragement."],
                ].map(([h,d],i) => (
                  <div key={i} style={{display:"flex", gap:14, alignItems:"flex-start"}}>
                    <span style={{width:8, height:8, borderRadius:"50%", background:"var(--green-500)", marginTop:9, flexShrink:0, boxShadow:"0 0 0 4px var(--green-100)"}}></span>
                    <div>
                      <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:17, color:"var(--charcoal-900)"}}>{h}</div>
                      <div style={{fontSize:14.5, color:"var(--charcoal-500)", marginTop:2, lineHeight:1.6}}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="values-grid">
            {[
              ["Founded","2025","ReservWise launches out of a small studio of operators and former founders."],
              ["Built for","Solo operators, freelancers, agencies, and owner-led teams up to 25 people."],
              ["Backed by","Independent. Built quietly. We answer to customers, not quarters."],
            ].map(([h,big,d],i) => (
              <div key={i} className="value-card">
                <div className="value-num">0{i+1}</div>
                <div className="value-h">{h}</div>
                <div style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:24, color:"var(--green-600)", marginTop:6, letterSpacing:"-0.02em"}}>{big}</div>
                <div className="value-d" style={{marginTop:10}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA go={go}/>
    </div>
  );
}

/* ============================================================
   Login
   ============================================================ */
function LoginPage({ go }) {
  return (
    <div className="auth-page page-fade-in">
      <div className="auth-card">
        <div className="auth-brand">
          <LogoMark size={32}/>
          <div style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:22}}>
            <span style={{color:"var(--charcoal-900)"}}>Reserv</span><span style={{color:"var(--green-600)"}}>Wise</span>
          </div>
        </div>
        <div className="auth-h">Welcome back</div>
        <div className="auth-sub">Sign in to your ReservWise workspace.</div>

        <button className="social-btn">
          <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.4c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.5z"/><path fill="#34A853" d="M12 22c2.8 0 5.2-1 7-2.5l-3.4-2.6c-1 .6-2.2 1-3.6 1-2.8 0-5.1-1.9-5.9-4.4H2.6v2.7C4.4 19.7 7.9 22 12 22z"/><path fill="#FBBC05" d="M6.1 13.5c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V6.7H2.6C1.9 8.3 1.5 10.1 1.5 12s.4 3.7 1.1 5.3l3.5-3.8z"/><path fill="#EA4335" d="M12 5.4c1.5 0 2.9.5 4 1.5l3-3C17.2 2.4 14.8 1.5 12 1.5 7.9 1.5 4.4 3.8 2.6 7.2l3.5 2.7c.8-2.5 3.1-4.5 5.9-4.5z"/></svg>
          Continue with Google
        </button>
        <button className="social-btn">
          <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000" d="M16.4 12.7c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.2.9-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3.1 2.4 1.2 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.7-1-2.7-4zM14 5.7c.7-.8 1.1-1.9 1-3-1 0-2.2.6-2.9 1.4-.6.7-1.2 1.9-1 2.9 1.1.1 2.2-.5 2.9-1.3z"/></svg>
          Continue with Apple
        </button>

        <div className="auth-divider">or</div>

        <div className="auth-field">
          <label className="input-label">Email</label>
          <input className="input" type="email" placeholder="you@business.com"/>
        </div>
        <div className="auth-field">
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
            <label className="input-label">Password</label>
            <a style={{fontSize:12, color:"var(--green-600)", fontWeight:600}}>Forgot?</a>
          </div>
          <input className="input" type="password" placeholder="••••••••"/>
        </div>
        <button className="btn btn-primary" style={{width:"100%", marginTop:8}} onClick={() => go("dashboard")}>
          Sign in
        </button>
        <div className="auth-foot">
          New to ReservWise? <a onClick={() => go("signup")}>Start your trial</a>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Sign up
   ============================================================ */
function SignupPage({ go }) {
  return (
    <div className="auth-page page-fade-in">
      <div className="auth-card">
        <div className="auth-brand">
          <LogoMark size={32}/>
          <div style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:22}}>
            <span style={{color:"var(--charcoal-900)"}}>Reserv</span><span style={{color:"var(--green-600)"}}>Wise</span>
          </div>
        </div>
        <div className="auth-h">Start your 14-day trial</div>
        <div className="auth-sub">No card required. Full access. Cancel any time.</div>

        <div className="auth-field">
          <label className="input-label">Your name</label>
          <input className="input" type="text" placeholder="Jordan Mercer"/>
        </div>
        <div className="auth-field">
          <label className="input-label">Work email</label>
          <input className="input" type="email" placeholder="you@business.com"/>
        </div>
        <div className="auth-field">
          <label className="input-label">Business type</label>
          <select className="input">
            <option>Freelancer / solo operator</option>
            <option>Agency or studio</option>
            <option>E-commerce / DTC</option>
            <option>Consultant or coach</option>
            <option>Owner-led team (2–25)</option>
            <option>Other</option>
          </select>
        </div>
        <div className="auth-field">
          <label className="input-label">Password</label>
          <input className="input" type="password" placeholder="At least 12 characters"/>
        </div>
        <button className="btn btn-primary" style={{width:"100%", marginTop:8}} onClick={() => go("dashboard")}>
          Start Building Reserves
        </button>
        <div style={{fontSize:12, color:"var(--charcoal-500)", textAlign:"center", marginTop:14}}>
          By starting, you agree to our Terms and Privacy.
        </div>
        <div className="auth-side-info">
          <div><div className="num">14 days</div><div className="lab">Free trial</div></div>
          <div><div className="num">No card</div><div className="lab">Required</div></div>
          <div><div className="num">SOC 2</div><div className="lab">Secured</div></div>
        </div>
        <div className="auth-foot">
          Already have an account? <a onClick={() => go("login")}>Sign in</a>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Standalone dashboard preview page
   ============================================================ */
function DashboardPage({ go }) {
  return (
    <div className="page-fade-in">
      <header className="page-header">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Live preview</span>
          <h1 style={{marginTop:14}}>The ReservWise workspace.</h1>
          <p className="lead">A look at the core overview — exactly what you'd see five minutes after connecting your first account.</p>
        </div>
      </header>
      <section style={{paddingTop:32}}>
        <div className="container-wide">
          <DashboardHero/>
        </div>
      </section>
      <section className="bg-soft">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow"><span className="dot"></span>What you're looking at</span>
            <h2 className="h-section" style={{marginTop:14}}>Seven cards. One operating picture.</h2>
          </div>
          <div className="pillar-grid" style={{marginTop:48}}>
            {[
              ["Current reserve health","78% funded · across four buckets, weighted to operating first."],
              ["Safe to spend","$4,820 this week — what stays available after every reserve obligation."],
              ["Owner draw available","Next draw, with month-over-month change. Set the cadence, ReservWise holds it."],
              ["Runway forecast","Past 6 months solid, next 6 dashed. The 'NOW' line shows where you stand."],
              ["Upcoming tax set aside","Quarterly progress against the estimate. Q2 sits at 79%."],
              ["Reserve buckets","Operating, tax, owner draw, growth — funded in priority order."],
              ["AI recommendation","The next disciplined move, with reasoning available on demand."],
            ].map(([h,d],i) => (
              <div key={i} className="pillar-card">
                <div className="pillar-icon">{[Icon.shield, Icon.pulse, Icon.draw, Icon.forecast, Icon.tax, Icon.reserve, Icon.ai][i]({})}</div>
                <div className="pillar-name">{h}</div>
                <div className="pillar-desc">{d}</div>
                <div className="pillar-num">0{i+1}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA go={go}/>
    </div>
  );
}

/* ============================================================
   Contact / Support
   ============================================================ */
function ContactPage({ go }) {
  return (
    <div className="page-fade-in">
      <header className="page-header">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Contact</span>
          <h1 style={{marginTop:14}}>Talk to a real human about your cashflow.</h1>
          <p className="lead">We answer every email. We do live walkthroughs. We don't gate basic help behind plans.</p>
        </div>
      </header>
      <section>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-card">
              <div style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:20, marginBottom:14, color:"var(--charcoal-900)"}}>How to reach us</div>
              {[
                [Icon.reserve, "Help center", <span>Self-serve guides, FAQs, troubleshooting — <a href={window.SUPPORT_URL} style={{color:"var(--green-600)", fontWeight:600}}>support.reservwise.com</a></span>],
                [Icon.pulse, "Support", "support@reservwise.com · replies in under 4 hours"],
                [Icon.ai, "Sales & demos", "sales@reservwise.com · 30-minute live walkthrough"],
                [Icon.shield, "Security", "security@reservwise.com · SOC 2 + responsible disclosure"],
                [Icon.growth, "Press", "press@reservwise.com"],
              ].map(([I,h,d],i) => (
                <div key={i} className="contact-row">
                  <div className="contact-icon"><I/></div>
                  <div>
                    <div className="contact-h">{h}</div>
                    <div className="contact-d">{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="contact-card">
              <div style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:20, marginBottom:14, color:"var(--charcoal-900)"}}>Send us a note</div>
              <div className="auth-field"><label className="input-label">Your name</label><input className="input" placeholder="Jordan Mercer"/></div>
              <div className="auth-field"><label className="input-label">Email</label><input className="input" type="email" placeholder="you@business.com"/></div>
              <div className="auth-field"><label className="input-label">What's this about?</label>
                <select className="input"><option>General question</option><option>Sales / demo</option><option>Support issue</option><option>Press</option></select>
              </div>
              <div className="auth-field"><label className="input-label">Message</label>
                <textarea className="input" rows="4" placeholder="Tell us a bit about your situation..."></textarea>
              </div>
              <button className="btn btn-primary" style={{width:"100%"}}>Send message</button>
            </div>
          </div>
        </div>
      </section>
      <FinalCTA go={go}/>
    </div>
  );
}

Object.assign(window, { ProductPage, FeaturesPage, PricingPage, AboutPage, LoginPage, SignupPage, DashboardPage, ContactPage });