/* Home page entry */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariation": "primary",
  "accentHue": 244,
  "showRolesMarquee": true,
  "showHomeTeasers": true
}/*EDITMODE-END*/;

const HEADLINES = {
  primary:    "Stop chasing\nyour money.",
  secondary:  "The set companion\nfor film freelancers.",
  payroll:    "Wrap the day.\nNot the math.",
};

/* ── Small "feature teaser" card linking to the Features page ── */
const TeaserCard = ({eyebrow, title, body, accent, frag, stagger}) => (
  <a href="features.html" className="reveal" data-stagger={stagger} style={{
    display:'block', textDecoration:'none', color:'inherit',
    padding:'28px 28px 0', borderRadius:24,
    background:'linear-gradient(180deg, rgba(28,28,30,0.7), rgba(20,20,22,0.7))',
    border:'0.5px solid rgba(255,255,255,0.08)',
    overflow:'hidden', position:'relative',
    transition:'transform 320ms var(--ease-spring), border-color 320ms ease',
  }}
  onMouseEnter={e => e.currentTarget.style.transform='translateY(-4px)'}
  onMouseLeave={e => e.currentTarget.style.transform=''}
  >
    <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color: accent, marginBottom: 10}}>{eyebrow}</div>
    <h3 className="display" style={{fontSize:'clamp(22px, 2.2vw, 30px)', margin:'0 0 10px', letterSpacing:'-0.025em'}}>{title}</h3>
    <p style={{fontSize:14, color:'var(--sa-text3)', lineHeight:1.55, margin:'0 0 22px'}}>{body}</p>
    <div style={{display:'flex', alignItems:'center', gap:6, fontSize:13, fontWeight:600, color:'var(--sa-accent-hi)', marginBottom: 28}}>
      Explore <span style={{display:'inline-block', transform:'translateX(0)', transition:'transform 220ms var(--ease-spring)'}}>→</span>
    </div>
    <div style={{
      display:'flex', justifyContent:'center', alignItems:'flex-end',
      minHeight: 200, marginTop: 8,
      marginInline: -28, paddingInline: 28,
      maskImage: 'linear-gradient(180deg, #000 60%, transparent)',
      WebkitMaskImage: 'linear-gradient(180deg, #000 60%, transparent)',
    }}>
      <div className="float-idle" style={{'--frag-rot':'rotate(-1.5deg)'}}>
        {frag}
      </div>
    </div>
  </a>
);

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  usePageBoot();

  React.useEffect(() => {
    const h = tweaks.accentHue;
    document.documentElement.style.setProperty('--sa-accent',    `hsl(${h}, 76%, 64%)`);
    document.documentElement.style.setProperty('--sa-accent-hi', `hsl(${h}, 86%, 72%)`);
    document.documentElement.style.setProperty('--sa-accent-2',  `hsl(${h}, 96%, 82%)`);
    document.documentElement.style.setProperty('--sa-accent-dim', `hsla(${h}, 76%, 64%, 0.16)`);
    document.documentElement.style.setProperty('--sa-accent-bd',  `hsla(${h}, 86%, 72%, 0.38)`);
  }, [tweaks.accentHue]);

  const headline = HEADLINES[tweaks.headlineVariation] || HEADLINES.primary;

  return (
    <>
      <Nav page="home"/>
      <Hero headline={headline}/>
      {tweaks.showRolesMarquee && <RolesMarquee/>}

      {/* Teaser grid — six tiles, each linking to the Features page */}
      {tweaks.showHomeTeasers && (
        <section className="section" style={{paddingTop: 40, paddingBottom: 40}}>
          <div className="container" style={{textAlign:'center', marginBottom: 48}}>
            <div className="section-eyebrow reveal in">What's inside</div>
            <h2 className="display reveal in" style={{fontSize:'clamp(36px, 5.2vw, 64px)', margin:'0 0 18px', letterSpacing:'-0.035em'}}>
              Built for the call sheet.<br/>
              <span style={{color:'var(--sa-text3)'}}>Not the boardroom.</span>
            </h2>
            <p className="reveal in" style={{fontSize:18, color:'var(--sa-text3)', maxWidth:620, margin:'0 auto', lineHeight:1.55, transitionDelay:'60ms'}}>
              Every screen, every calc, every invoice — designed by people who have
              been on a 14-hour day and still had to do their own bookkeeping.
            </p>
          </div>

          <div className="container teaser-grid">
            <TeaserCard
              stagger="1"
              eyebrow="Calculator"
              accent="var(--sa-accent-hi)"
              title="ACCP rates. Down to the meal penalty."
              body="Pick your role, punch in your hours. Set Assist runs the ACCP scale and tells you what your day is worth."
              frag={<FragCalcResult/>}
            />
            <TeaserCard
              stagger="2"
              eyebrow="Invoicing"
              accent="var(--sa-green)"
              title="Get paid. Without the spreadsheet."
              body="Gear, labour, or both. Auto-numbered. Branded PDFs on Pro. The Finances tab tells you who's late."
              frag={<FragInvoiceList/>}
            />
            <TeaserCard
              stagger="3"
              eyebrow="Mileage"
              accent="var(--sa-green)"
              title="Drives that track themselves."
              body="Background detection. CRA-correct math. Your year-to-date deduction updates on every trip."
              frag={<FragMileage/>}
            />
            <TeaserCard
              stagger="4"
              eyebrow="Receipts"
              accent="var(--sa-teal)"
              title="Snap it. It's filed."
              body="OCR pulls vendor, date, subtotal, HST. Auto-categorized against the right job."
              frag={<FragReceipt/>}
            />
            <TeaserCard
              stagger="5"
              eyebrow="Finances"
              accent="var(--sa-amber)"
              title="Tax time, without the panic."
              body="HST by quarter. Expenses by category. T2125-ready Excel for your accountant."
              frag={<FragFinances/>}
            />
            <TeaserCard
              stagger="6"
              eyebrow="AD Tools · Live Activity"
              accent="var(--sa-pink)"
              title="The child performer clock, on the Lock Screen."
              body="Daily-hour limits as a Live Activity — visible in the Dynamic Island, even with the app closed."
              frag={<FragChildTimer/>}
            />
          </div>

          <div className="container reveal" style={{textAlign:'center', marginTop: 56}}>
            <a href="features.html" className="btn btn-secondary">
              See every feature →
            </a>
          </div>

          <style>{`
            .teaser-grid {
              display: grid;
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 18px;
            }
            @media (max-width: 980px) {
              .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            }
            @media (max-width: 620px) {
              .teaser-grid { grid-template-columns: 1fr; }
            }
          `}</style>
        </section>
      )}

      {/* Quick CTA → Pricing */}
      <section className="section" style={{paddingTop: 40, paddingBottom: 80}}>
        <div className="container-narrow reveal" style={{
          padding: '40px',
          background:'linear-gradient(135deg, rgba(94,92,230,0.15), rgba(20,20,24,0.6))',
          border:'0.5px solid var(--sa-accent-bd)',
          borderRadius: 24,
          textAlign:'center',
        }}>
          <h3 className="display" style={{fontSize:'clamp(28px, 3.6vw, 44px)', margin:'0 0 12px', letterSpacing:'-0.03em'}}>
            Three tiers. Cancel any time.
          </h3>
          <p style={{fontSize:16, color:'var(--sa-text3)', maxWidth:520, margin:'0 auto 24px', lineHeight:1.55}}>
            Free to start. Basic for working freelancers. Pro if you're incorporated.
          </p>
          <a href="pricing.html" className="btn btn-primary">See pricing →</a>
        </div>
      </section>

      <FinalCTA
        headline={<>That's a <span style={{
          background:'linear-gradient(90deg, #7b7af4, #ff7fb6)',
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'
        }}>wrap</span>.</>}
        sub="Free to start. Five minutes to set up. One less spreadsheet on your laptop."
      />

      <Footer/>

      <TweaksPanel>
        <TweakSection title="Hero">
          <TweakSelect
            label="Headline"
            value={tweaks.headlineVariation}
            onChange={v => setTweak('headlineVariation', v)}
            options={[
              {value:'primary',   label:'Stop chasing your money.'},
              {value:'secondary', label:'The set companion…'},
              {value:'payroll',   label:'Wrap the day. Not the math.'},
            ]}
          />
          <TweakToggle
            label="Show roles marquee"
            value={tweaks.showRolesMarquee}
            onChange={v => setTweak('showRolesMarquee', v)}
          />
          <TweakToggle
            label="Show home teaser grid"
            value={tweaks.showHomeTeasers}
            onChange={v => setTweak('showHomeTeasers', v)}
          />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakSlider
            label="Accent hue"
            min={0} max={360} step={1}
            value={tweaks.accentHue}
            onChange={v => setTweak('accentHue', v)}
            format={v => `${v}°`}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);