// Features page — Direction B visual language
// Structures the platform feature spec into scannable, premium sections.

function FeaturesPage(){
  return (
    <div className="fp" style={{ width:'100%', background:'#fff', color:'var(--tz-ink)', fontFamily:'var(--tz-body)' }}>

      {/* ============ HERO ============ */}
      <div style={{background:'var(--tz-blue)', color:'#fff', position:'relative', overflow:'hidden'}}>
        <SiteHeader dark={true} transparent={true}/>
        <div style={{position:'absolute', inset:0, opacity:.08, backgroundImage:'radial-gradient(circle at 1px 1px, #fff 1px, transparent 0)', backgroundSize:'24px 24px', pointerEvents:'none'}}/>

        <section style={{padding:'88px 64px 56px', position:'relative', maxWidth:1280, margin:'0 auto'}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:10, padding:'6px 12px', borderRadius:999, background:'rgba(201,162,75,.14)', border:'1px solid rgba(201,162,75,.4)', fontSize:12, color:'var(--tz-gold)', letterSpacing:'.04em', marginBottom:28}}>
            <span style={{width:6,height:6,borderRadius:99,background:'var(--tz-gold)'}}/>
            Platform features
          </div>
          <h1 style={{fontFamily:'var(--tz-display)', fontSize:96, lineHeight:1.02, fontWeight:500, margin:'0 0 24px', letterSpacing:'-.025em', maxWidth:1100}}>
            One platform for your <span style={{color:'var(--tz-gold)', fontStyle:'italic'}}>entire fundraising operation.</span>
          </h1>
          <p style={{fontSize:20, lineHeight:1.55, color:'rgba(255,255,255,.78)', maxWidth:820, margin:'0 0 56px'}}>
            A complete auction, raffle, and donation platform — engineered for the way nonprofits actually run campaigns.
          </p>

          {/* Big stat counters */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, borderTop:'1px solid rgba(255,255,255,.16)'}}>
            {[
              {n:'20+', l:'Payment methods', s:'Stripe, PayPal, Authorize.Net, Zelle, ACH, check & 14 more'},
              {n:'20+', l:'Admin modules',   s:'From products to ambassadors to live-stream control'},
              {n:'6',   l:'SMTP providers',  s:'Resend, SendGrid, Mailgun, SES, Postmark, Brevo'},
              {n:'10+', l:'Email templates', s:'Edit every customer email in a visual editor'},
            ].map((s,i)=>(
              <div key={s.l} style={{padding:'40px 28px 0', borderRight: i<3? '1px solid rgba(255,255,255,.16)':'none'}}>
                <div style={{fontFamily:'var(--tz-display)', fontSize:80, lineHeight:1, color:'var(--tz-gold)', fontWeight:500, letterSpacing:'-.02em'}}>{s.n}</div>
                <div style={{fontSize:13, color:'#fff', marginTop:14, fontWeight:600, letterSpacing:'.02em'}}>{s.l}</div>
                <div style={{fontSize:12.5, color:'rgba(255,255,255,.6)', marginTop:6, lineHeight:1.55}}>{s.s}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Anchor strip */}
        <div style={{borderTop:'1px solid rgba(255,255,255,.12)', padding:'18px 64px', maxWidth:1280, margin:'0 auto'}}>
          <div style={{display:'flex', gap:36, fontSize:12.5, color:'rgba(255,255,255,.6)', letterSpacing:'.04em', textTransform:'uppercase', flexWrap:'wrap'}}>
            <span style={{color:'var(--tz-gold)'}}>Jump to</span>
            <a href="#payments" style={anchor}>Payments</a>
            <a href="#email" style={anchor}>Email</a>
            <a href="#admin" style={anchor}>Admin</a>
            <a href="#promotions" style={anchor}>Promotions</a>
            <a href="#ambassadors" style={anchor}>Ambassadors</a>
            <a href="#prizes" style={anchor}>Prizes & raffle</a>
            <a href="#checkout" style={anchor}>Checkout</a>
            <a href="#security" style={anchor}>Security</a>
            <a href="#yours-forever" style={anchor}>Yours forever</a>
          </div>
        </div>
      </div>

      {/* ============ THE THREE PILLARS ============ */}
      <section id="platform" style={{padding:'120px 64px 40px', maxWidth:1280, margin:'0 auto'}}>
        <div style={{maxWidth:780, marginBottom:56}}>
          <Eyebrow>Standout features</Eyebrow>
          <h2 style={{fontFamily:'var(--tz-display)', fontSize:64, lineHeight:1.05, fontWeight:500, margin:'18px 0 16px', letterSpacing:'-.02em'}}>
            Capabilities that set the platform apart.
          </h2>
          <p style={{fontSize:17, lineHeight:1.65, color:'var(--tz-muted)', margin:0}}>
            Three areas where we go far beyond what generic fundraising tools offer — and where the difference shows up in your campaign results.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:18}}>
          <PillarCard
            tag="Payments"
            title="20+ payment methods"
            blurb="Accept payment through virtually any gateway your donors use — more options than any standard fundraising platform."
            chips={['Authorize.Net','Stripe','PayPal','Square','Clover','Stax','MerchPay','Bevel']}
            footer="+ 12 more including Banquest, Fidelity, ACH, check, Zelle, Venmo, wire."
          />
          <PillarCard
            tag="Email"
            title="6 SMTP providers + full template control"
            blurb="Pick your provider. Customize every transactional email in a visual editor with live preview and variable replacement."
            chips={['Resend','SendGrid','Mailgun','Amazon SES','Postmark','Brevo']}
            footer="10+ templates · visual HTML editor · dynamic variables."
            highlight
          />
          <PillarCard
            tag="Management"
            title="20+ admin modules"
            blurb="The most comprehensive admin dashboard for complete platform control — purpose-built for fundraising operations."
            chips={['Orders','Coupons','EZ-Pass','Grand Prizes','Ambassadors','Roles','Email tpl','Live stream']}
            footer="Plus payment config, site settings, and maintenance mode."
          />
        </div>
      </section>

      {/* ============ PAYMENT WALL ============ */}
      <section id="payments" style={{padding:'80px 64px 120px'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:32, marginBottom:36, flexWrap:'wrap'}}>
            <div style={{maxWidth:640}}>
              <Eyebrow>All supported payment methods</Eyebrow>
              <h3 style={{fontFamily:'var(--tz-display)', fontSize:44, lineHeight:1.08, fontWeight:500, margin:'14px 0 10px', letterSpacing:'-.02em'}}>
                Accept payment however your donors prefer to pay.
              </h3>
              <p style={{fontSize:15, color:'var(--tz-muted)', margin:0, lineHeight:1.6}}>
                Card processing, ACH, Zelle, Venmo, donor-advised funds, OJC, Pledger, Sola, even paper check. Configured per-organization in the admin.
              </p>
            </div>
            <div style={{fontSize:12, color:'var(--tz-muted)', letterSpacing:'.16em', textTransform:'uppercase'}}>
              <span style={{color:'var(--tz-gold-2)', fontWeight:700}}>20</span> &nbsp;methods supported
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10, border:'1px solid rgba(11,42,74,.08)', borderRadius:14, padding:10, background:'var(--tz-cream)'}}>
            {[
              {n:'Authorize.Net', t:'Card'},
              {n:'Stripe',        t:'Card'},
              {n:'PayPal',        t:'Wallet'},
              {n:'Square',        t:'Card'},
              {n:'Clover',        t:'Card'},
              {n:'Stax',          t:'Card'},
              {n:'MerchPay',      t:'Card'},
              {n:'Bevel Payment', t:'Card'},
              {n:'Banquest',      t:'Card'},
              {n:'Fidelity',      t:'Card'},
              {n:'ACH transfer',  t:'Bank'},
              {n:'Wire transfer', t:'Bank'},
              {n:'Check',         t:'Offline'},
              {n:'Cash',          t:'Offline'},
              {n:'Zelle',         t:'P2P'},
              {n:'Venmo',         t:'P2P'},
              {n:'OJC',           t:'DAF'},
              {n:'Pledger',       t:'DAF'},
              {n:'Donor Fund',    t:'DAF'},
              {n:'Sola',          t:'DAF'},
            ].map(p=>(
              <div key={p.n} style={{
                background:'#fff', borderRadius:10, padding:'18px 16px',
                border:'1px solid rgba(11,42,74,.06)',
                display:'flex', flexDirection:'column', alignItems:'flex-start', gap:8,
                minHeight:88,
              }}>
                <div style={{fontSize:10.5, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--tz-gold-2)', fontWeight:700}}>{p.t}</div>
                <div style={{fontFamily:'var(--tz-display)', fontSize:18, fontWeight:500, color:'var(--tz-blue)', letterSpacing:'-.01em'}}>{p.n}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ EMAIL TEMPLATE SECTION ============ */}
      <section id="email" style={{padding:'120px 64px', background:'var(--tz-cream)'}}>
        <div style={{display:'grid', gridTemplateColumns:'.95fr 1.05fr', gap:64, alignItems:'center', maxWidth:1280, margin:'0 auto'}}>
          <div>
            <Eyebrow>Complete email template control</Eyebrow>
            <h3 style={{fontFamily:'var(--tz-display)', fontSize:52, lineHeight:1.06, fontWeight:500, margin:'16px 0 16px', letterSpacing:'-.02em'}}>
              Customize every automated email. Preview before saving.
            </h3>
            <p style={{fontSize:16, lineHeight:1.65, color:'var(--tz-muted)', margin:'0 0 28px', maxWidth:520}}>
              No more "{`{{first_name}}`} reach out to support" emails. Every customer-facing message — from order confirmation to ambassador welcome to OTP — is editable in a visual HTML editor with dynamic variables and live preview.
            </p>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:24}}>
              {[
                'Order Confirmation',
                'Welcome Email',
                'Password Reset',
                'OTP Verification',
                'Refund Confirmation',
                'Ambassador Approval',
                'Ambassador Welcome',
                'Ambassador Sale Notification',
                'Checkout Reminder',
                'Custom Templates',
              ].map(n=>(
                <div key={n} style={{display:'flex', alignItems:'center', gap:10, padding:'10px 0', borderBottom:'1px solid rgba(11,42,74,.06)'}}>
                  <span style={{width:6,height:6,borderRadius:99,background:'var(--tz-gold)'}}/>
                  <span style={{fontSize:14, fontWeight:500}}>{n}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Mock email editor */}
          <div style={{borderRadius:14, overflow:'hidden', boxShadow:'0 30px 60px rgba(11,42,74,.15)', background:'#fff', border:'1px solid rgba(11,42,74,.08)'}}>
            <div style={{padding:'12px 16px', display:'flex', alignItems:'center', gap:8, borderBottom:'1px solid rgba(11,42,74,.08)', background:'#fafaf6'}}>
              <span style={{width:10,height:10,borderRadius:99,background:'#ddd'}}/>
              <span style={{width:10,height:10,borderRadius:99,background:'#ddd'}}/>
              <span style={{width:10,height:10,borderRadius:99,background:'#ddd'}}/>
              <span style={{marginLeft:14, fontSize:12, fontFamily:'ui-monospace, Menlo, monospace', color:'var(--tz-muted)'}}>Email template editor — Order Confirmation</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'140px 1fr', minHeight:480}}>
              <div style={{borderRight:'1px solid rgba(11,42,74,.08)', padding:'14px 0', background:'#fafaf6', display:'flex', flexDirection:'column', gap:2, fontSize:12}}>
                {['Order Confirm','Welcome','Password Reset','OTP Verify','Refund','Ambassador','Checkout Reminder','+ New template'].map((n,i)=>(
                  <div key={n} style={{padding:'8px 14px', color: i===0?'var(--tz-blue)':'var(--tz-muted)', background: i===0?'rgba(201,162,75,.12)':'transparent', fontWeight: i===0?600:500, borderLeft: i===0? '2px solid var(--tz-gold)':'2px solid transparent'}}>
                    {n}
                  </div>
                ))}
              </div>
              <div style={{padding:'18px 22px', display:'flex', flexDirection:'column', gap:14}}>
                <div style={{display:'flex', gap:8, fontSize:11}}>
                  <span style={{padding:'4px 10px', borderRadius:6, background:'var(--tz-blue)', color:'#fff', fontWeight:600}}>Visual</span>
                  <span style={{padding:'4px 10px', borderRadius:6, color:'var(--tz-muted)'}}>HTML</span>
                  <span style={{padding:'4px 10px', borderRadius:6, color:'var(--tz-muted)'}}>Preview</span>
                </div>
                <div style={{padding:'8px 12px', background:'#f5f1e8', borderRadius:6, fontSize:11.5, fontFamily:'ui-monospace, Menlo, monospace', color:'var(--tz-blue-2)', display:'flex', gap:8, flexWrap:'wrap'}}>
                  <span style={{padding:'2px 6px', background:'#fff', border:'1px solid var(--tz-gold)', color:'var(--tz-gold-2)', borderRadius:4}}>{'{{first_name}}'}</span>
                  <span style={{padding:'2px 6px', background:'#fff', border:'1px solid var(--tz-gold)', color:'var(--tz-gold-2)', borderRadius:4}}>{'{{order_total}}'}</span>
                  <span style={{padding:'2px 6px', background:'#fff', border:'1px solid var(--tz-gold)', color:'var(--tz-gold-2)', borderRadius:4}}>{'{{ticket_count}}'}</span>
                  <span style={{padding:'2px 6px', background:'#fff', border:'1px solid var(--tz-gold)', color:'var(--tz-gold-2)', borderRadius:4}}>{'{{org_name}}'}</span>
                </div>
                <div style={{border:'1px solid rgba(11,42,74,.08)', borderRadius:8, padding:'22px 24px', background:'#fff', display:'flex', flexDirection:'column', gap:10, flex:1}}>
                  <div style={{height:40, background:'var(--tz-blue)', borderRadius:4}}/>
                  <div style={{fontFamily:'var(--tz-display)', fontSize:22, fontWeight:500, color:'var(--tz-blue)', marginTop:6}}>Thank you for your order, <span style={{background:'rgba(201,162,75,.18)', padding:'0 4px', borderRadius:3}}>Sarah</span>.</div>
                  <div style={{height:8, background:'#eee', borderRadius:4, width:'90%'}}/>
                  <div style={{height:8, background:'#eee', borderRadius:4, width:'78%'}}/>
                  <div style={{height:8, background:'#eee', borderRadius:4, width:'82%'}}/>
                  <div style={{marginTop:6, padding:14, background:'#fafaf6', border:'1px dashed rgba(11,42,74,.15)', borderRadius:6, fontSize:12, color:'var(--tz-muted)'}}>
                    Order #1283 — 24 raffle tickets — $360.00
                  </div>
                  <div style={{marginTop:10, padding:'10px 16px', background:'var(--tz-gold)', color:'var(--tz-blue)', fontWeight:600, fontSize:13, borderRadius:6, alignSelf:'flex-start'}}>View receipt →</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ COMPLETE FEATURE SET — sectioned grid ============ */}
      <section style={{padding:'120px 64px 80px', maxWidth:1280, margin:'0 auto'}}>
        <div style={{textAlign:'center', maxWidth:780, margin:'0 auto 64px'}}>
          <Eyebrow>Complete feature set</Eyebrow>
          <h3 style={{fontFamily:'var(--tz-display)', fontSize:60, lineHeight:1.05, fontWeight:500, margin:'16px 0 16px', letterSpacing:'-.02em'}}>
            Everything you need for a successful campaign.
          </h3>
          <p style={{margin:0, fontSize:17, lineHeight:1.65, color:'var(--tz-muted)'}}>
            Thirteen capability areas, built specifically for nonprofit auctions and raffles — and tailored to the way you want to run them.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
          <FeatureCard
            tag="Marketing"
            title="Smart checkout reminder system"
            blurb="Automated reminder emails for unfinished checkouts — recover lost donations with configurable timing and limits."
            items={[
              'Configurable reminder intervals (days between emails)',
              'Maximum email limit per customer',
              'Enable/disable with one click',
              'Tracks email send history',
              'Works with guest checkouts',
            ]}
          />
          <FeatureCard id="promotions"
            tag="Promotions"
            title="Dual coupon system"
            blurb="Two coupon types for maximum flexibility in promotions and fundraising drives."
            items={[
              'Multiplier coupons: double or triple ticket quantities',
              'Price discount coupons: fixed dollar amount off',
              'Option to exclude grand prizes from discounts',
              'Usage limits per coupon',
              'Usage tracking and analytics',
              'Unlimited staff coupons option',
            ]}
            highlight
          />
          <FeatureCard
            tag="Promotions"
            title="Timed discount campaigns"
            blurb="Create urgency with time-limited tiers that automatically apply based on checkout value."
            items={[
              'Set campaign start and end dates',
              'Multiple spending tiers per campaign',
              'Automatic discount calculation',
              'Visual countdown timers',
              'Highlight best-value tiers',
              'Works alongside coupons',
            ]}
          />
          <FeatureCard
            tag="Products"
            title="EZ-Pass ticket bundles"
            blurb="Pre-configured ticket packages that make purchasing easy — perfect for phone orders."
            items={[
              'Bundle multiple prize categories',
              'Set custom pricing per package',
              'Display ticket value vs. cost',
              'Configurable prize selections',
              'Quick-add from admin panel',
            ]}
          />
          <FeatureCard
            tag="Live events"
            title="Live auction video embed"
            blurb="Embed live streaming video directly on the campaign site for live drawing events."
            items={[
              'YouTube / Vimeo embed support',
              'Admin-controlled video URL',
              'Show / hide with one toggle',
              'Persistent player across pages',
              'Mobile-responsive player',
              'Perfect for live drawing events',
            ]}
          />
          <FeatureCard
            tag="Sales"
            title="Phone order system"
            blurb="A dedicated admin interface for entering orders taken over the phone."
            items={[
              'Quick product selection',
              'Apply coupons manually',
              'Process credit cards or mark as paid',
              'Customer info capture',
              'Internal order notes',
              'Prints order confirmation',
            ]}
          />
          <FeatureCard id="ambassadors"
            tag="Marketing"
            title="Ambassador / referral program"
            blurb="A complete ambassador system with custom pages, tracking, and automated notifications."
            items={[
              'Custom ambassador pages with unique URLs',
              'Customizable profile photos & banners',
              'Real-time sales tracking dashboard',
              'Automatic email notifications for sales',
              'Top-fundraiser leaderboard',
              'Session-based referral attribution',
            ]}
            highlight
          />
          <FeatureCard id="prizes"
            tag="Prizes"
            title="Grand prize & raffle system"
            blurb="A flexible grand-prize system with tiered pricing for bulk purchases."
            items={[
              'Multiple types: Mega Raffle, Jackpot, Split-the-Pot',
              'Configurable quantity tiers with pricing',
              'Phone-order-only tier option',
              'Custom images per prize',
              'Display order control',
              'Enable / disable prizes instantly',
            ]}
          />
          <FeatureCard id="checkout"
            tag="Checkout"
            title="Advanced checkout system"
            blurb="A smart checkout flow with real-time calculations across multiple item types."
            items={[
              'Products, EZ-Pass, and grand prizes in one checkout',
              'Real-time discount tier calculation',
              'Coupon application with preview',
              'Guest checkout with session tracking',
              'Processing fee pass-through option',
              'Expandable mobile checkout bar',
            ]}
          />
          <FeatureCard
            tag="Security"
            title="Complete audit trail"
            blurb="Track every admin action with detailed audit logging."
            items={[
              'Full admin action history',
              'Before / after data snapshots',
              'Undo / redo capability',
              'IP address logging',
              'Filter by action type',
              'Error log viewer',
            ]}
          />
          <FeatureCard
            tag="Fundraising"
            title="Flexible donation system"
            blurb="Accept donations with payment plans and recurring options."
            items={[
              'One-time donations',
              'Monthly recurring donations',
              'Payment plan support (split payments)',
              'Quick-select amount buttons',
              'Custom amount entry',
              'Referral attribution',
            ]}
          />
          <FeatureCard
            tag="Design"
            title="Content management"
            blurb="Create custom pages and manage site content without code."
            items={[
              'Custom page builder with rich text editor',
              'Dynamic menu management',
              'Homepage video carousel',
              'Editable page content sections',
              'Maintenance mode toggle',
              'Banner & hero customization',
            ]}
          />
          <FeatureCard id="security"
            tag="Security"
            title="Advanced security"
            blurb="Bank-grade security with role-based access control."
            items={[
              'Row-level security policies',
              'Admin / user role system',
              'OTP email verification',
              'Secure password reset flow',
              'Session management',
              'Rate-limiting protection',
            ]}
          />
        </div>
      </section>

      {/* ============ ADMIN MODULES STRIP ============ */}
      <section id="admin" style={{padding:'80px 64px 120px', background:'var(--tz-parchment)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{maxWidth:720, marginBottom:40}}>
            <Eyebrow>20+ admin modules</Eyebrow>
            <h3 style={{fontFamily:'var(--tz-display)', fontSize:48, lineHeight:1.06, fontWeight:500, margin:'14px 0 12px', letterSpacing:'-.02em'}}>
              The whole campaign in one back office.
            </h3>
            <p style={{fontSize:15, color:'var(--tz-muted)', margin:0, lineHeight:1.6}}>
              Every part of the operation has a dedicated admin module. No spreadsheets, no third-party patches, no "we'll fix that in a future release."
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:1, background:'rgba(11,42,74,.1)', border:'1px solid rgba(11,42,74,.1)', borderRadius:10, overflow:'hidden'}}>
            {[
              ['Product & category manager','Inventory, pricing, photos'],
              ['Order manager','Edit, refund, resend receipts'],
              ['Coupon & discount campaigns','Multipliers, fixed-amount, tiered'],
              ['EZ-Pass package manager','Pre-configured ticket bundles'],
              ['Grand prize & tier manager','Mega Raffle, Jackpot, Split-the-Pot'],
              ['Ambassador manager','Custom pages, leaderboards, payouts'],
              ['User role manager','Admin, staff, donor permissions'],
              ['Email template editor','Visual HTML, dynamic variables'],
              ['SMTP provider config','Switch providers in seconds'],
              ['Payment provider config','Connect any of 20 methods'],
              ['Live stream manager','YouTube / Vimeo embed control'],
              ['Site settings & maintenance','Banners, hero, downtime mode'],
              ['Phone order entry','Take orders over the phone'],
              ['Audit & error logs','Every change, who, when, undo'],
              ['Donation & recurring','One-time, monthly, payment plans'],
              ['Content & menu manager','Pages, navigation, carousels'],
              ['Sponsor & banner manager','Logo wall, hero rotation'],
              ['Reports & analytics','Real-time campaign dashboards'],
              ['Receipts & tax letters','501(c)(3) acknowledgements'],
              ['Backups & exports','One-click data download'],
            ].map((m,i)=>(
              <div key={i} style={{padding:'22px 22px 28px', background:'#fff', display:'flex', flexDirection:'column', gap:8, minHeight:108}}>
                <div style={{fontFamily:'var(--tz-display)', fontSize:17, fontWeight:500, color:'var(--tz-blue)', letterSpacing:'-.005em'}}>{m[0]}</div>
                <div style={{fontSize:12.5, color:'var(--tz-muted)', lineHeight:1.55}}>{m[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ YOURS FOREVER ============ */}
      <section id="yours-forever" style={{padding:'120px 64px', background:'var(--tz-cream)', position:'relative'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{maxWidth:820, marginBottom:64}}>
            <Eyebrow>Built around you</Eyebrow>
            <h2 style={{fontFamily:'var(--tz-display)', fontSize:64, lineHeight:1.05, fontWeight:500, margin:'18px 0 18px', letterSpacing:'-.02em'}}>
              Customized to your design. <span style={{fontStyle:'italic', color:'var(--tz-gold)'}}>Yours forever.</span>
            </h2>
            <p style={{margin:0, fontSize:18, lineHeight:1.65, color:'var(--tz-muted)', maxWidth:720}}>
              We don't hand you a template and walk away. We build the platform around your organization, your workflows, and the features your campaign actually needs — and when we're done, the software is yours to keep. No annual rental fees. No subscription that resets every year.
            </p>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:18}}>
            {/* Card 1 — your design */}
            <div style={{background:'#fff', border:'1px solid rgba(11,42,74,.08)', borderRadius:14, padding:'36px 32px', display:'flex', flexDirection:'column', gap:18}}>
              <div style={{display:'inline-flex', alignSelf:'flex-start', alignItems:'center', gap:8, padding:'5px 10px', borderRadius:99, background:'rgba(201,162,75,.14)', color:'var(--tz-gold)', fontSize:11, letterSpacing:'.06em', textTransform:'uppercase', fontWeight:600}}>
                01 · Design
              </div>
              <h3 style={{fontFamily:'var(--tz-display)', fontSize:28, lineHeight:1.2, fontWeight:500, margin:0, letterSpacing:'-.01em'}}>
                Customized to your design.
              </h3>
              <p style={{margin:0, fontSize:15, lineHeight:1.65, color:'var(--tz-muted)'}}>
                Bring us your brand — logo, colors, typography, mood — and we'll tailor the platform to match. The site looks like <em>you</em>, not a generic template.
              </p>
              <ul style={{margin:'4px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8, fontSize:13.5, color:'var(--tz-ink)'}}>
                {['Brand-matched theme & typography','Custom layouts for your campaigns','Bespoke imagery and tone'].map(x=>(
                  <li key={x} style={{display:'flex', gap:10, alignItems:'flex-start'}}>
                    <span style={{width:5, height:5, borderRadius:99, background:'var(--tz-gold)', marginTop:8, flexShrink:0}}/>
                    {x}
                  </li>
                ))}
              </ul>
            </div>

            {/* Card 2 — built the way you want — highlighted */}
            <div style={{background:'var(--tz-blue)', color:'#fff', borderRadius:14, padding:'36px 32px', display:'flex', flexDirection:'column', gap:18, position:'relative', overflow:'hidden'}}>
              <div style={{position:'absolute', inset:0, opacity:.06, backgroundImage:'radial-gradient(circle at 1px 1px, #fff 1px, transparent 0)', backgroundSize:'20px 20px', pointerEvents:'none'}}/>
              <div style={{display:'inline-flex', alignSelf:'flex-start', alignItems:'center', gap:8, padding:'5px 10px', borderRadius:99, background:'rgba(201,162,75,.2)', color:'var(--tz-gold)', fontSize:11, letterSpacing:'.06em', textTransform:'uppercase', fontWeight:600, position:'relative'}}>
                02 · Workflow
              </div>
              <h3 style={{fontFamily:'var(--tz-display)', fontSize:28, lineHeight:1.2, fontWeight:500, margin:0, letterSpacing:'-.01em', position:'relative'}}>
                Built the way you want it.
              </h3>
              <p style={{margin:0, fontSize:15, lineHeight:1.65, color:'rgba(255,255,255,.8)', position:'relative'}}>
                We work with you to make the site behave the way you need — and we'll add the features your campaign requires. If you can describe it, we can build it.
              </p>
              <ul style={{margin:'4px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8, fontSize:13.5, color:'#fff', position:'relative'}}>
                {['Workflows tailored to your team','Custom features added on request','Adjustments through every campaign'].map(x=>(
                  <li key={x} style={{display:'flex', gap:10, alignItems:'flex-start'}}>
                    <span style={{width:5, height:5, borderRadius:99, background:'var(--tz-gold)', marginTop:8, flexShrink:0}}/>
                    {x}
                  </li>
                ))}
              </ul>
            </div>

            {/* Card 3 — yours forever */}
            <div style={{background:'#fff', border:'1px solid rgba(11,42,74,.08)', borderRadius:14, padding:'36px 32px', display:'flex', flexDirection:'column', gap:18}}>
              <div style={{display:'inline-flex', alignSelf:'flex-start', alignItems:'center', gap:8, padding:'5px 10px', borderRadius:99, background:'rgba(201,162,75,.14)', color:'var(--tz-gold)', fontSize:11, letterSpacing:'.06em', textTransform:'uppercase', fontWeight:600}}>
                03 · Ownership
              </div>
              <h3 style={{fontFamily:'var(--tz-display)', fontSize:28, lineHeight:1.2, fontWeight:500, margin:0, letterSpacing:'-.01em'}}>
                And the best part — it's <em style={{color:'var(--tz-gold)', fontStyle:'italic'}}>yours.</em>
              </h3>
              <p style={{margin:0, fontSize:15, lineHeight:1.65, color:'var(--tz-muted)'}}>
                When the build is finished, you keep the software. Forever. No rental fees. No annual subscription that resets each year. Pay once, own it for good.
              </p>
              <ul style={{margin:'4px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8, fontSize:13.5, color:'var(--tz-ink)'}}>
                {['One-time build, lifetime ownership','No yearly software-rental fees','Run campaign after campaign — no extra cost'].map(x=>(
                  <li key={x} style={{display:'flex', gap:10, alignItems:'flex-start'}}>
                    <span style={{width:5, height:5, borderRadius:99, background:'var(--tz-gold)', marginTop:8, flexShrink:0}}/>
                    {x}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Pull quote */}
          <div style={{marginTop:64, padding:'48px 56px', background:'var(--tz-parchment)', border:'1px solid rgba(11,42,74,.08)', borderRadius:14, display:'flex', alignItems:'center', gap:36, flexWrap:'wrap'}}>
            <div style={{fontFamily:'var(--tz-display)', fontSize:80, lineHeight:0.6, color:'var(--tz-gold)', fontWeight:500}}>"</div>
            <div style={{flex:'1 1 360px', minWidth:280}}>
              <div style={{fontFamily:'var(--tz-display)', fontSize:24, lineHeight:1.4, fontWeight:500, color:'var(--tz-ink)', letterSpacing:'-.01em', fontStyle:'italic'}}>
                Build it once, with the team, the way you want it — and run your campaigns on it for years.
              </div>
              <div style={{marginTop:16, fontSize:12.5, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--tz-muted)'}}>
                The Tzedoka.org promise
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ PRICING ============ */}
      <section id="pricing" style={{padding:'120px 64px', background:'var(--tz-parchment)'}}>
        <div style={{maxWidth:1100, margin:'0 auto', textAlign:'center'}}>
          <Eyebrow>Pricing</Eyebrow>
          <h2 style={{fontFamily:'var(--tz-display)', fontSize:64, lineHeight:1.05, fontWeight:500, margin:'18px 0 14px', letterSpacing:'-.02em'}}>
            One price. <span style={{fontStyle:'italic', color:'var(--tz-gold)'}}>Yours forever.</span>
          </h2>
          <p style={{fontSize:18, lineHeight:1.65, color:'var(--tz-muted)', maxWidth:680, margin:'0 auto 56px'}}>
            One build fee. No subscription that resets every year. The platform is built around your organization and you keep it for the long haul.
          </p>

          <div style={{display:'grid', gridTemplateColumns:'1fr', gap:24, justifyItems:'center'}}>
            <div className="fp-pricing-card" style={{
              background:'#fff', borderRadius:18,
              padding:'clamp(24px, 5vw, 48px) clamp(20px, 4.5vw, 44px)',
              border:'1px solid rgba(11,42,74,.08)',
              boxShadow:'0 30px 80px -30px rgba(11,42,74,.18)',
              maxWidth:640, width:'100%',
              transition:'transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease',
            }}>
              <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'5px 12px', borderRadius:999, background:'rgba(201,162,75,.14)', color:'var(--tz-gold-2)', fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', fontWeight:700, marginBottom:20}}>
                Fully customizable system
              </div>
              <div style={{display:'flex', alignItems:'baseline', justifyContent:'center', gap:6, marginBottom:8}}>
                <span style={{fontFamily:'var(--tz-display)', fontSize:80, lineHeight:1, fontWeight:500, color:'var(--tz-blue)', letterSpacing:'-.03em'}}>$10,000</span>
              </div>
              <div style={{fontSize:14, color:'var(--tz-muted)', marginBottom:28}}>
                One-time build fee · yours to keep
              </div>

              <ul style={{listStyle:'none', margin:'0 0 28px', padding:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px 24px', textAlign:'left'}}>
                {[
                  'Designed around your organization',
                  'All platform features included',
                  'Custom workflows & modules',
                  'Migration & launch support',
                  'Source code is yours',
                  'Use it for many years',
                ].map(it=>(
                  <li key={it} style={{display:'flex', alignItems:'flex-start', gap:10, fontSize:14.5, lineHeight:1.5}}>
                    <span style={{flexShrink:0, marginTop:7, width:6, height:6, borderRadius:99, background:'var(--tz-gold)'}}/>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>

              <Btn variant="primary" size="lg" style={{width:'100%', justifyContent:'center'}}>Book a demo →</Btn>
              <div style={{marginTop:14, fontSize:12.5, color:'var(--tz-muted)'}}>
                No subscription. No annual rental. No surprise fees.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ CTA ============ */}
      <section id="contact" style={{padding:'120px 64px', background:'var(--tz-blue)', color:'#fff', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:.06, backgroundImage:'radial-gradient(circle at 1px 1px, #fff 1px, transparent 0)', backgroundSize:'24px 24px', pointerEvents:'none'}}/>
        <div style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:64, alignItems:'center', position:'relative'}}>
          <div>
            <Eyebrow dark color="var(--tz-gold)">Ready to launch your campaign?</Eyebrow>
            <h3 style={{fontFamily:'var(--tz-display)', fontSize:64, lineHeight:1.05, fontWeight:500, margin:'18px 0 22px', letterSpacing:'-.02em'}}>
              Let's talk it through.
            </h3>
            <p style={{margin:'0 0 28px', fontSize:17, lineHeight:1.6, color:'rgba(255,255,255,.78)', maxWidth:520}}>
              Every campaign is different. Tell us about your organization, your event, and your goal — we'll show you exactly how the platform fits, and what it would cost to get yours built.
            </p>
            <div style={{display:'flex', gap:14, flexWrap:'wrap', alignItems:'center'}}>
              <Btn variant="gold" size="lg">Book a 30-min walkthrough →</Btn>
              <a href="tel:+19175771866" style={{color:'#fff', textDecoration:'none', fontWeight:600, fontSize:15, display:'inline-flex', alignItems:'center', gap:8}}>
                Or call us · <span style={{color:'var(--tz-gold)'}}>917-577-1866</span>
              </a>
            </div>
            <div style={{marginTop:32, display:'flex', gap:32, fontSize:13, color:'rgba(255,255,255,.6)', flexWrap:'wrap'}}>
              <span>✓ No commitment to chat</span>
              <span>✓ Reply within 1 business day</span>
              <span>✓ NDA on request</span>
            </div>
          </div>

          {/* Mini contact form */}
          <ContactForm/>
        </div>
      </section>

      <SiteFooter dark={false}/>
    </div>
  );
}

const anchor = {color:'inherit', textDecoration:'none', cursor:'pointer'};

function PillarCard({ tag, title, blurb, chips, footer, highlight }){
  return (
    <div style={{
      padding:'28px 26px 24px',
      borderRadius:14,
      background: highlight? 'var(--tz-blue)' : 'var(--tz-cream)',
      color: highlight? '#fff' : 'var(--tz-ink)',
      border: highlight? '1px solid var(--tz-blue-2)' : '1px solid rgba(11,42,74,.08)',
      display:'flex', flexDirection:'column', gap:14,
      boxShadow: highlight? '0 30px 60px rgba(11,42,74,.18)' : 'none',
    }}>
      <div style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color: highlight? 'var(--tz-gold)':'var(--tz-gold-2)', fontWeight:700}}>{tag}</div>
      <div style={{fontFamily:'var(--tz-display)', fontSize:28, lineHeight:1.15, fontWeight:500, letterSpacing:'-.01em', color: highlight? '#fff' : 'var(--tz-blue)'}}>{title}</div>
      <div style={{fontSize:14.5, lineHeight:1.6, color: highlight? 'rgba(255,255,255,.75)' : 'var(--tz-muted)'}}>{blurb}</div>
      <div style={{display:'flex', flexWrap:'wrap', gap:6, marginTop:4}}>
        {chips.map(c=>(
          <span key={c} style={{
            fontSize:12, padding:'5px 10px', borderRadius:999,
            background: highlight? 'rgba(255,255,255,.08)' : '#fff',
            border: highlight? '1px solid rgba(255,255,255,.15)' : '1px solid rgba(11,42,74,.1)',
            color: highlight? 'rgba(255,255,255,.9)' : 'var(--tz-blue)',
            fontWeight:500,
          }}>{c}</span>
        ))}
      </div>
      <div style={{fontSize:12.5, color: highlight? 'rgba(255,255,255,.55)' : 'var(--tz-muted)', marginTop:'auto', paddingTop:8, fontStyle:'italic', lineHeight:1.5}}>{footer}</div>
    </div>
  );
}

function FeatureCard({ tag, title, blurb, items, highlight, id }){
  return (
    <div id={id} style={{
      padding:'28px 28px 26px',
      borderRadius:14,
      background: highlight? 'var(--tz-blue)' : '#fff',
      color: highlight? '#fff' : 'var(--tz-ink)',
      border: highlight? 'none' : '1px solid rgba(11,42,74,.08)',
      boxShadow: highlight? '0 24px 48px rgba(11,42,74,.18)' : 'none',
      display:'flex', flexDirection:'column', gap:14,
    }}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:14}}>
        <div style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color: highlight? 'var(--tz-gold)' : 'var(--tz-gold-2)', fontWeight:700}}>{tag}</div>
      </div>
      <div style={{fontFamily:'var(--tz-display)', fontSize:30, lineHeight:1.1, fontWeight:500, letterSpacing:'-.01em', color: highlight? '#fff' : 'var(--tz-blue)'}}>{title}</div>
      <div style={{fontSize:15, lineHeight:1.6, color: highlight? 'rgba(255,255,255,.78)' : 'var(--tz-muted)'}}>{blurb}</div>
      <ul style={{margin:'8px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8}}>
        {items.map(it=>(
          <li key={it} style={{display:'flex', alignItems:'flex-start', gap:10, fontSize:14, lineHeight:1.5}}>
            <span style={{
              flexShrink:0, marginTop:6,
              width:5, height:5, borderRadius:99,
              background: highlight? 'var(--tz-gold)' : 'var(--tz-gold-2)',
            }}/>
            <span style={{color: highlight? 'rgba(255,255,255,.92)' : 'var(--tz-ink)'}}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Field({ label, name, placeholder, type='text', multiline, required, value, onChange, error, disabled }){
  const id = 'f-'+name;
  const invalid = !!error;
  const styleWithError = { ...fieldStyle, borderColor: invalid ? '#ef6262' : fieldStyle.border.split(' ').slice(2).join(' '), borderWidth:1, borderStyle:'solid' };
  return (
    <label htmlFor={id} style={{display:'flex', flexDirection:'column', gap:4}}>
      <span style={{fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'rgba(255,255,255,.6)', fontWeight:600}}>
        {label}{required && <span style={{color:'var(--tz-gold)', marginLeft:4}}>*</span>}
      </span>
      {multiline ? (
        <textarea id={id} name={name} placeholder={placeholder} rows={3} required={required} value={value} onChange={onChange} disabled={disabled}
          aria-invalid={invalid} aria-describedby={invalid ? id+'-err' : undefined} style={styleWithError}/>
      ) : (
        <input id={id} name={name} type={type} placeholder={placeholder} required={required} value={value} onChange={onChange} disabled={disabled}
          aria-invalid={invalid} aria-describedby={invalid ? id+'-err' : undefined} style={styleWithError}/>
      )}
      {invalid && <span id={id+'-err'} role="alert" style={{fontSize:11.5, color:'#ff9090', marginTop:2}}>{error}</span>}
    </label>
  );
}

const fieldStyle = {
  background:'rgba(255,255,255,.05)',
  border:'1px solid rgba(255,255,255,.15)',
  borderRadius:8,
  padding:'10px 12px',
  color:'#fff',
  fontFamily:'inherit', fontSize:14,
  outline:'none', resize:'vertical',
};

function ContactForm(){
  const [values, setValues] = React.useState({ name:'', org:'', email:'', message:'', _gotcha:'' });
  const [errors, setErrors] = React.useState({});
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = React.useState('');

  const setField = (k) => (e) => setValues(v => ({ ...v, [k]: e.target.value }));

  function validate(v){
    const e = {};
    if (!v.name.trim()) e.name = 'Please tell us your name.';
    if (!v.email.trim()) e.email = 'Email is required.';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email.trim())) e.email = 'That email looks off — double-check it.';
    if (!v.message.trim()) e.message = 'A short note helps us reply usefully.';
    else if (v.message.trim().length < 10) e.message = 'A few more words please (10+ characters).';
    return e;
  }

  async function onSubmit(ev){
    ev.preventDefault();
    setErrorMsg('');
    const e = validate(values);
    setErrors(e);
    if (Object.keys(e).length) return;
    if (values._gotcha) { setStatus('success'); return; } // bot trap

    setStatus('sending');
    try {
      const r = await fetch('/api/contact', {
        method:'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
          name: values.name.trim(),
          org: values.org.trim(),
          email: values.email.trim(),
          message: values.message.trim(),
          _gotcha: values._gotcha,
        }),
      });
      if (!r.ok){
        let msg = 'Send failed. Please try again or email us directly.';
        try { const j = await r.json(); if (j && j.error) msg = j.error; } catch {}
        setErrorMsg(msg); setStatus('error'); return;
      }
      setStatus('success');
      setValues({ name:'', org:'', email:'', message:'', _gotcha:'' });
    } catch (err) {
      setErrorMsg('Network error. Check your connection and try again.');
      setStatus('error');
    }
  }

  if (status === 'success') {
    return (
      <div role="status" style={{background:'var(--tz-blue-2)', border:'1px solid rgba(201,162,75,.4)', borderRadius:14, padding:'40px 28px', textAlign:'center'}}>
        <div style={{width:48, height:48, borderRadius:99, background:'rgba(201,162,75,.18)', color:'var(--tz-gold)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:24, marginBottom:14}}>✓</div>
        <div style={{fontFamily:'var(--tz-display)', fontSize:22, fontWeight:500, marginBottom:8}}>Got it — thank you.</div>
        <div style={{fontSize:14, lineHeight:1.6, color:'rgba(255,255,255,.7)', maxWidth:340, margin:'0 auto'}}>
          We'll reply within one business day. If it's urgent, call <a href="tel:+19175771866" style={{color:'var(--tz-gold)', textDecoration:'none'}}>917-577-1866</a>.
        </div>
        <button onClick={()=>setStatus('idle')} style={{marginTop:20, background:'transparent', border:'1px solid rgba(255,255,255,.25)', color:'#fff', padding:'8px 16px', borderRadius:999, cursor:'pointer', fontFamily:'var(--tz-body)', fontSize:13}}>Send another</button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} noValidate style={{background:'var(--tz-blue-2)', border:'1px solid rgba(255,255,255,.1)', borderRadius:14, padding:'28px 28px 24px'}}>
      <div style={{fontFamily:'var(--tz-display)', fontSize:22, fontWeight:500, marginBottom:16}}>Or send a quick note</div>
      <div style={{display:'flex', flexDirection:'column', gap:10}}>
        <Field label="Your name" name="name" placeholder="Sarah Goldberg" required value={values.name} onChange={setField('name')} error={errors.name} disabled={status==='sending'}/>
        <Field label="Organization" name="org" placeholder="Yeshiva of Brooklyn" value={values.org} onChange={setField('org')} disabled={status==='sending'}/>
        <Field label="Email" name="email" type="email" placeholder="sarah@yobk.org" required value={values.email} onChange={setField('email')} error={errors.email} disabled={status==='sending'}/>
        <Field label="What's the campaign?" name="message" placeholder="Annual auction, Feb 7 — ~$1.2M goal" multiline required value={values.message} onChange={setField('message')} error={errors.message} disabled={status==='sending'}/>

        {/* Honeypot — hidden from humans, bots fill it */}
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" value={values._gotcha} onChange={setField('_gotcha')}
          aria-hidden="true" style={{position:'absolute', left:'-9999px', width:1, height:1, opacity:0, pointerEvents:'none'}}/>

        {status === 'error' && (
          <div role="alert" style={{background:'rgba(239,98,98,.12)', border:'1px solid rgba(239,98,98,.45)', color:'#ffb6b6', padding:'10px 12px', borderRadius:8, fontSize:13}}>
            {errorMsg}
          </div>
        )}

        <button type="submit" disabled={status==='sending'} style={{
          marginTop:6, padding:'14px 22px', borderRadius:999,
          background: status==='sending' ? 'rgba(201,162,75,.6)' : 'var(--tz-gold)',
          color:'var(--tz-blue)',
          border:'none', fontFamily:'var(--tz-body)', fontWeight:700, fontSize:14,
          cursor: status==='sending' ? 'wait' : 'pointer', letterSpacing:'.01em',
          display:'inline-flex', alignItems:'center', justifyContent:'center', gap:10,
        }}>
          {status==='sending' && <span style={{width:14, height:14, border:'2px solid var(--tz-blue)', borderRightColor:'transparent', borderRadius:99, animation:'tz-spin .7s linear infinite'}}/>}
          {status==='sending' ? 'Sending…' : "Send → we'll reply within 1 business day"}
        </button>
        <div style={{fontSize:11.5, color:'rgba(255,255,255,.55)', marginTop:4, textAlign:'center'}}>
          We never share your info. Used only to reply about your project.
        </div>
      </div>
    </form>
  );
}

Object.assign(window, { FeaturesPage });
