// direction-a.jsx — "Apple product page" treatment
// Confident editorial typography, generous whitespace, chapter-style section titles
// with the period. Light-first with dark hero + dark Assist section to break rhythm.

const DA = {
  bg: '#fafaf7',
  bgAlt: '#f3f1ec',
  ink: '#0a0a0b',
  ink2: '#1a1a1c',
  text: '#1a1a1c',
  text2: '#5a5a60',
  text3: '#6e6e74',
  hairline: '#e0dcd0',
  hairlineSoft: '#b8b1a0',
  // Two AA-compliant tones, deliberately distinct (see docs/design/WERKD_VISUAL_LANGUAGE.md
  // for the product's own light/dark brand oranges, e67e22/ee9147 — same idea, this
  // marketing site's own tokens):
  //  - brand: for TEXT and button-fills on LIGHT backgrounds. Matches the actual
  //    product's current CTA/nav-accent color (#C4502A, sampled directly from the
  //    app). White-on-fill measures ~4.64:1 (passes AA). As direct text/icon color
  //    on this site's cream background it's ~4.44:1 — just under the 4.5 text
  //    threshold, but dramatically better than the original #F97316's ~2.7:1.
  //  - brandLight: for TEXT/icons on DARK backgrounds (hero, Why Werkd, Field Mode,
  //    demo modal, and any dark card/column nested in an otherwise-light section).
  //    Unchanged — the original vivid orange already passes ~6.9:1 against near-black.
  // Button/badge FILLS with white text are safe with `brand` regardless of the
  // surrounding page background (contrast there is fill-vs-its-own-text, not fill-vs-page).
  brand: '#C4502A',
  brandLight: '#F97316',
  font: 'var(--font-display)',
};

window.DA = DA;

// Real production destinations (app.werkd.pro). Auth is Clerk; legal routes
// live on the app domain. External links open in a new tab.
const W_BASE = 'https://app.werkd.pro';
const WERKD_URLS = {
  signIn:    `${W_BASE}/sign-in`,
  signUp:    `${W_BASE}/sign-up`,
  privacy:   `${W_BASE}/privacy`,
  terms:     `${W_BASE}/terms`,
  dpa:       `${W_BASE}/dpa`,
  security:  `${W_BASE}/security`,
  doNotSell: `${W_BASE}/do-not-sell`,
  contact:   'mailto:contact@werkd.pro',
  dmca:      'mailto:dmca@122ai.io',
};
window.WERKD_URLS = WERKD_URLS;

// Pricing — single source of truth lives in pricing-constants.js (loaded
// before this file). Falls back to today's values if that script is missing.
const P = window.WERKD_PRICING || { owner: 99, seat: 59, ownerAnnual: 999, seatAnnual: 599, trialDays: 14, annual: 1188 };

// ─── Responsive width model ──────────────────────────────────────────────
// The page was authored at a fixed 1280px logical width. The standalone home
// page sets window.__WERKD_RESPONSIVE = true and scales/relayouts by viewport.
// Inside the comparison canvas the flag is unset, so components always render
// the original 1280px desktop composition (the artboard handles its own size).
//   vw >= 1280  → logical = vw   (fluid desktop, scale 1)
//   760..1279   → logical = 1280 (desktop comp, scaled down to fit width)
//   < 760       → logical = 430  (true mobile layout, scaled to device width)
function werkdLayout(vw) {
  if (vw >= 1280) return { logical: vw, scale: 1 };
  if (vw >= 760)  return { logical: 1280, scale: vw / 1280 };
  return { logical: 430, scale: vw / 430 };
}
function useWerkdWidth() {
  const resp = () => !!window.__WERKD_RESPONSIVE;
  const get = () => resp() ? werkdLayout(document.documentElement.clientWidth).logical : 1280;
  const [w, setW] = React.useState(get);
  React.useEffect(() => {
    if (!resp()) return;
    const on = () => setW(get());
    window.addEventListener('resize', on);
    on();
    return () => window.removeEventListener('resize', on);
  }, []);
  return w;
}
// isMobile when logical collapses to the 430 mobile track.
function useIsMobile() { return useWerkdWidth() <= 430; }
window.werkdLayout = werkdLayout;
window.useWerkdWidth = useWerkdWidth;
window.useIsMobile = useIsMobile;

// Orange period only (wordmark style: "Werkd.")
// dark: true when the ADot sits on a dark background (hero, Why Werkd, Field
// Mode, demo modal, or a dark card/column nested in a light section) — uses
// DA.brandLight instead of DA.brand since a plain <ADot/> doesn't inherit its
// parent's color and needs to independently pick the AA-safe tone for its context.
function ADot({ dark }) {
  return <span style={{ color: dark ? DA.brandLight : DA.brand }}>.</span>;
}

// Orange last letter + orange period — used to brand-tail section headings.
// e.g. "Today." renders as "Toda" black + "y." orange.
function ATail({ letter, dark }) {
  return <span style={{ color: dark ? DA.brandLight : DA.brand }}>{letter}.</span>;
}

// Reveal on scroll — fades + lifts in when in viewport. Plays once.
function Reveal({ children, delay = 0, y = 28, as: As = 'div' }) {
  const ref = React.useRef(null);
  const reduced = window.usePrefersReducedMotion ? window.usePrefersReducedMotion() : false;
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (reduced) { setShown(true); return; }
    if (!ref.current) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setShown(true); obs.disconnect(); }
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [reduced]);
  return (
    <As ref={ref} style={{
      transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
      opacity: shown ? 1 : 0,
      transition: reduced ? 'none' : `transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms, opacity 1.1s ease ${delay}ms`,
      willChange: 'transform, opacity',
    }}>
      {children}
    </As>
  );
}

window.ATail = ATail;
window.Reveal = Reveal;

// Number counter — counts up from 0 to `to` once visible. Ease-out so it
// decelerates onto the final value; raise `ease` for a longer, slower settle.
function Counter({ to, suffix = '', prefix = '', duration = 2200, startDelay = 0, ease = 3, easeFn = null, threshold = 0.4, reserve = true, format = (n) => n.toLocaleString() }) {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const startedRef = React.useRef(false);
  const reduced = window.usePrefersReducedMotion ? window.usePrefersReducedMotion() : false;
  React.useEffect(() => {
    if (reduced) { setVal(to); return; }   // reduced motion: show final value, no count-up
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !startedRef.current) {
        startedRef.current = true;
        const begin = () => {
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = easeFn ? easeFn(t) : 1 - Math.pow(1 - t, ease);
            setVal(eased * to);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        };
        if (startDelay > 0) setTimeout(begin, startDelay); else begin();
        obs.disconnect();
      }
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration, startDelay, ease, easeFn, threshold, reduced]);
  // Reserve the final value's width so the layout never reflows as digits and
  // separators appear while counting (which otherwise nudges the whole card).
  if (reserve) {
    return (
      <span ref={ref} style={{ position: 'relative', display: 'inline-block', whiteSpace: 'nowrap' }}>
        <span aria-hidden="true" style={{ visibility: 'hidden' }}>{prefix}{format(to)}{suffix}</span>
        <span style={{ position: 'absolute', left: 0, top: 0, whiteSpace: 'nowrap' }}>{prefix}{format(Math.round(val))}{suffix}</span>
      </span>
    );
  }
  return <span ref={ref}>{prefix}{format(Math.round(val))}{suffix}</span>;
}

// Slide-in from a direction. Useful for sequenced cards/rows.
function Slide({ children, delay = 0, from = 'left', distance = 32 }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); obs.disconnect(); }
    }, { threshold: 0.18 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const offX = from === 'left' ? -distance : from === 'right' ? distance : 0;
  const offY = from === 'up' ? distance : from === 'down' ? -distance : 0;
  return (
    <div ref={ref} style={{
      transform: shown ? 'translate(0,0)' : `translate(${offX}px, ${offY}px)`,
      opacity: shown ? 1 : 0,
      transition: `transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms, opacity 0.9s ease ${delay}ms`,
      willChange: 'transform, opacity',
    }}>
      {children}
    </div>
  );
}

window.Counter = Counter;
window.Slide = Slide;

function APrimaryButton({ children, dark = false, big = false, onClick, href }) {
  const Tag = href ? 'a' : 'button';
  const linkProps = href ? { href, target: '_blank', rel: 'noopener noreferrer' } : {};
  return (
    <Tag onClick={onClick} {...linkProps} style={{
      padding: big ? '16px 32px' : '12px 24px',
      background: dark ? DA.brandLight : DA.brand,
      color: dark ? DA.ink : '#fff',
      border: 'none',
      borderRadius: big ? 6 : 4,
      fontSize: big ? 16 : 14,
      fontWeight: 700,
      fontFamily: DA.font,
      cursor: 'pointer',
      letterSpacing: '-0.01em',
      textDecoration: 'none',
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>{children}</Tag>
  );
}

function ASecondaryButton({ children, dark = false, big = false, onClick, href }) {
  const Tag = href ? 'a' : 'button';
  const linkProps = href ? { href, target: '_blank', rel: 'noopener noreferrer' } : {};
  return (
    <Tag onClick={onClick} {...linkProps} style={{
      padding: big ? '16px 32px' : '12px 24px',
      background: 'transparent',
      color: dark ? '#fff' : DA.ink,
      border: `1px solid ${dark ? '#3a3a3e' : '#cfcabc'}`,
      borderRadius: big ? 6 : 4,
      fontSize: big ? 16 : 14,
      fontWeight: 600,
      fontFamily: DA.font,
      cursor: 'pointer',
      letterSpacing: '-0.01em',
      textDecoration: 'none',
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>{children}</Tag>
  );
}

// Top nav
const NAV_LINKS = [
  ['Why werkd', '#intelligence'], ['Today', '#today'], ['Ledger', '#ledger'],
  ['For Customers', '#customers'], ['Pricing', '#pricing'],
];
function ANav() {
  const m = useIsMobile();
  const [open, setOpen] = React.useState(false);
  // Close the mobile menu if we leave the mobile track
  React.useEffect(() => { if (!m) setOpen(false); }, [m]);
  return (
    <nav aria-label="Primary" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(8, 8, 9, 0.97)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      transform: 'translateZ(0)', willChange: 'transform',
      borderBottom: '1px solid rgba(255,255,255,0.1)',
      padding: m ? '12px 20px' : '14px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: DA.font, gap: 12,
    }}>
      <div role="img" aria-label="Werkd" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <WerkdMark size={32} color={DA.brandLight}/>
        <WerkdWordmark size={22} color="#f5f5f2" dotColor={DA.brandLight}/>
      </div>
        {/* Nav links — with underline hover (collapsed into menu on mobile) */}
        {!m && (
        <div style={{ display: 'flex', gap: 26, alignItems: 'center' }}>
          {NAV_LINKS.map(([l, href]) => (
            <a key={l} href={href} className="w-navlink" style={{ fontSize: 13, color: 'rgba(245,245,242,0.65)', fontWeight: 500, textDecoration: 'none', whiteSpace: 'nowrap' }}>{l}</a>
          ))}
        </div>
        )}
        <div style={{ display: 'flex', alignItems: 'center', gap: m ? 10 : 16 }}>
          <button type="button" onClick={() => window.openEarlyAccess()} className="w-shimmer" style={{
            padding: '9px 16px', background: DA.brandLight, color: '#0a0a0b',
            border: 'none', borderRadius: 4, fontSize: 13, fontWeight: 700,
            cursor: 'pointer', display: 'inline-block', fontFamily: DA.font,
            whiteSpace: 'nowrap',
          }}>Request early access</button>
          {m && (
            <button
              type="button"
              onClick={() => setOpen((o) => !o)}
              aria-expanded={open}
              aria-label={open ? 'Close menu' : 'Open menu'}
              style={{
                width: 44, height: 44, marginRight: -6,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                color: '#f5f5f2',
              }}
            >
              <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true" focusable="false">
                {open ? (
                  <g stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                    <line x1="5" y1="5" x2="17" y2="17"/>
                    <line x1="17" y1="5" x2="5" y2="17"/>
                  </g>
                ) : (
                  <g stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                    <line x1="3" y1="6" x2="19" y2="6"/>
                    <line x1="3" y1="11" x2="19" y2="11"/>
                    <line x1="3" y1="16" x2="19" y2="16"/>
                  </g>
                )}
              </svg>
            </button>
          )}
        </div>

      {/* Mobile menu — drops below the sticky bar */}
      {m && open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(10, 10, 11, 0.97)',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          borderBottom: '1px solid rgba(255,255,255,0.1)',
          boxShadow: '0 16px 32px rgba(0,0,0,0.35)',
          display: 'flex', flexDirection: 'column',
          padding: '8px 20px 16px',
        }}>
          {NAV_LINKS.map(([l, href]) => (
            <a key={l} href={href} onClick={() => setOpen(false)} style={{
              padding: '14px 0', fontSize: 16, fontWeight: 600, color: '#f5f5f2',
              textDecoration: 'none', borderBottom: '1px solid rgba(255,255,255,0.1)',
            }}>{l}</a>
          ))}
          <button type="button" onClick={() => { setOpen(false); window.openEarlyAccess(); }} style={{
            padding: '14px 0', fontSize: 16, fontWeight: 700, color: DA.brandLight,
            textDecoration: 'none', background: 'none', border: 'none', textAlign: 'left', fontFamily: DA.font, cursor: 'pointer',
          }}>Request early access</button>
        </div>
      )}
    </nav>
  );
}

// HERO
const SCRIM_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scrimTL": 0.82,
  "scrimTR": 0.48,
  "scrimBL": 0.95,
  "scrimBR": 0.55,
  "shadowOpacity": 0.45,
  "shadowBlur": 18,
  "eyebrowOpacity": 1,
  "eyebrowBlur": 7,
  "headlineGrayOpacity": 1,
  "showPhone": false,
  "textFullWidth": false
}/*EDITMODE-END*/;

function buildScrim(tl, tr, bl, br) {
  const c = 'rgba(10,10,11,';
  return [
    `radial-gradient(ellipse 75% 75% at 0% 0%, ${c}${tl}) 0%, transparent 65%)`,
    `radial-gradient(ellipse 75% 75% at 100% 0%, ${c}${tr}) 0%, transparent 65%)`,
    `radial-gradient(ellipse 75% 75% at 0% 100%, ${c}${bl}) 0%, transparent 65%)`,
    // Bottom-right is the most prominent corner: a larger, denser, softer pool
    // that both hides the footage watermark and bleeds well into the video. Its
    // solid-ish core (controlled by `br`) feathers all the way out — no hard edge.
    `radial-gradient(ellipse 135% 120% at 100% 100%, ${c}${br}) 0%, ${c}${Math.min(br, 0.9) * br}) 26%, ${c}${0.42 * br}) 52%, transparent 82%)`,
    `linear-gradient(90deg, ${c}0.55) 0%, ${c}0.10) 50%, ${c}0.18) 100%)`,
  ].join(', ');
}

function AHero() {
  const m = useIsMobile();
  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakSlider = window.TweakSlider;
  const TweakToggle = window.TweakToggle;
  const [t, setTweak] = window.useTweaks(SCRIM_DEFAULTS);
  const scrim = buildScrim(t.scrimTL, t.scrimTR, t.scrimBL, t.scrimBR);
  // Static hero still (replaced the video loop, Jul 2026). One JPEG under the
  // same tweakable corner scrim. A one-time 5s settle-zoom (CSS, ends on its
  // own) adds life without needing WCAG 2.2.2's pause control (motion ≤ 5s),
  // and is disabled under prefers-reduced-motion.
  const showStill = !m;
  return (
    <section style={{
      background: DA.ink,
      color: '#fff',
      padding: m ? '120px 20px 48px' : '48px 40px',
      minHeight: m ? 0 : 'calc(100vh - 62px)',
      display: m ? 'block' : 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      boxSizing: 'border-box',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: DA.font,
    }}>
      {/* Dusk-driveway hero still, under the same tweakable corner scrim.
          Subject (tech + van) sits at the right where the phone overlaps it —
          the scrim keeps it a rim-lit silhouette so the phone stays dominant. */}
      {showStill && (
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
          <div className="w-hero-still" style={{
            position: 'absolute', inset: 0,
            backgroundImage: "url('assets/werkd-hero-still.jpg')",
            backgroundSize: 'cover',
            backgroundPosition: '50% 28%',
          }}/>
          <div style={{ position: 'absolute', inset: 0, background: scrim }}/>
        </div>
      )}

      {/* Hero rail: identical to the sections below (1120, centered) on normal
          laptop widths — but on very wide windows the left inset is capped at
          10vw so the text stays anchored toward the photo's dark left edge
          instead of drifting toward center (there's no phone balancing the
          right side by default). marginLeft wins over the shorthand's auto. */}
      <div style={{ maxWidth: 1120, margin: '0 auto', marginLeft: 'clamp(0px, calc((100% - 1120px) / 2), 10vw)', position: 'relative' }}>
        {/* Eyebrow tag — category + audience */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          border: `1px solid rgba(255,255,255,0.18)`,
          fontSize: m ? 11 : 12, color: 'rgba(255,255,255,0.7)', fontWeight: 600,
          letterSpacing: m ? '0.1em' : '0.14em',
          marginBottom: 28,
          opacity: t.eyebrowOpacity,
          textShadow: t.eyebrowBlur > 0 ? `0 1px ${t.eyebrowBlur}px rgba(0,0,0,0.6)` : 'none',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: DA.brandLight, flexShrink: 0 }}/>
          <span>COMING SOON · THE AI BUSINESS APP FOR TRADES</span>
        </div>

        {/* Two-column hero: copy left, phone right */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: m ? '1fr' : (t.showPhone ? 'minmax(0, 1fr) 380px' : 'minmax(0, 1fr)'),
          gap: m ? 40 : 48,
          alignItems: 'center',
          minHeight: m ? 0 : 640,
        }}>
          {/* LEFT — Headline + sub + CTAs + chips. Capped at 692px — exactly
              the width the column has when the phone (380px + 48px gap) is
              showing on the 1120 rail — so the text sits identically whether
              the phone is on or off. */}
          <div style={{ maxWidth: (m || t.textFullWidth) ? 'none' : 692 }}>
            <h1 style={{
              fontSize: 'clamp(64px, 8.4vw, 108px)',
              fontWeight: 800,
              letterSpacing: '-0.05em',
              lineHeight: 0.95,
              margin: 0,
              textWrap: 'balance',
              textShadow: `0 2px ${t.shadowBlur}px rgba(0,0,0,${t.shadowOpacity})`,
            }}>
              <span style={{ fontWeight: 500, color: 'rgba(255,255,255,0.5)', opacity: t.headlineGrayOpacity }}>You do the work.</span>
              <div style={{ marginTop: 10 }}>
                <span>werk<span style={{ color: DA.brandLight }}>d.</span></span>{' '}
                <span style={{ color: '#fff' }}>does the rest.</span>
              </div>
            </h1>

            <p style={{
              margin: '28px 0 8px',
              maxWidth: 580,
              fontSize: 20, lineHeight: 1.45, fontWeight: 400,
              color: 'rgba(255,255,255,0.7)',
              textWrap: 'pretty',
            }}>
              Book jobs that fit your route. Quote on the spot. Invoice before you leave. Close the day clean.
            </p>
            <p style={{
              margin: '22px 0 12px',
              maxWidth: 540,
              fontSize: 17, lineHeight: 1.45, fontWeight: 500,
              color: '#fff',
              textWrap: 'pretty',
            }}>
              Built for solo trades and small crews who need less admin between jobs.
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 32, marginBottom: 14 }}>
              <APrimaryButton dark big onClick={() => window.openEarlyAccess()}>Request early access <Icon name="chevron-right" size={18} color={DA.ink}/></APrimaryButton>
              <ASecondaryButton dark big onClick={() => window.dispatchEvent(new CustomEvent('werkd:open-demo'))}>See 90-sec demo</ASecondaryButton>
            </div>

            {/* Reassurance line below CTAs */}
            <div style={{
              fontSize: 13, color: 'rgba(255,255,255,0.55)',
              fontWeight: 500,
            }}>
              No card. No contract. Pays for itself with one extra job.
            </div>


          </div>

          {/* RIGHT — Phone, glowing + floating (toggleable in Tweaks to judge the bg photo) */}
          {t.showPhone && (
          <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            position: 'relative',
            transform: m ? 'none' : 'translateY(-28px)',
          }}>
            <div className="w-glow" style={{
              position: 'absolute',
              width: 500, height: 500,
              background: 'radial-gradient(circle, rgba(249,115,22,0.22) 0%, rgba(249,115,22,0) 70%)',
              pointerEvents: 'none',
            }}/>
            <div style={{ position: 'relative', zIndex: 2 }}>
              <PhoneFrame width={323} theme="dark" glow>
                <TodayScreen theme="light" state="default"/>
              </PhoneFrame>
            </div>
          </div>
          )}
        </div>
      </div>

      {/* Scrim + text-shadow tweaks — visible when Tweaks panel is open */}
      {TweaksPanel && (
        <TweaksPanel>
          <TweakSection label="Hero layout"/>
          <TweakToggle label="Show phone mockup" value={t.showPhone}
            onChange={v => setTweak('showPhone', v)}/>
          <TweakToggle label="Full-width text" value={t.textFullWidth}
            onChange={v => setTweak('textFullWidth', v)}/>
          <TweakSection label="Hero scrim — corners"/>
          <TweakSlider label="Top-left" value={t.scrimTL} min={0} max={1} step={0.01}
            onChange={v => setTweak('scrimTL', v)}/>
          <TweakSlider label="Top-right" value={t.scrimTR} min={0} max={1} step={0.01}
            onChange={v => setTweak('scrimTR', v)}/>
          <TweakSlider label="Bottom-left" value={t.scrimBL} min={0} max={1} step={0.01}
            onChange={v => setTweak('scrimBL', v)}/>
          <TweakSlider label="Bottom-right" value={t.scrimBR} min={0} max={1} step={0.01}
            onChange={v => setTweak('scrimBR', v)}/>
          <TweakSection label="Hero text shadow"/>
          <TweakSlider label="Opacity" value={t.shadowOpacity} min={0} max={1} step={0.01}
            onChange={v => setTweak('shadowOpacity', v)}/>
          <TweakSlider label="Blur" value={t.shadowBlur} min={0} max={48} step={1} unit="px"
            onChange={v => setTweak('shadowBlur', v)}/>
          <TweakSection label="Eyebrow tag"/>
          <TweakSlider label="Opacity" value={t.eyebrowOpacity} min={0} max={1} step={0.01}
            onChange={v => setTweak('eyebrowOpacity', v)}/>
          <TweakSlider label="Shadow blur" value={t.eyebrowBlur} min={0} max={32} step={1} unit="px"
            onChange={v => setTweak('eyebrowBlur', v)}/>
          <TweakSection label="Headline — “You do the work”"/>
          <TweakSlider label="Opacity" value={t.headlineGrayOpacity} min={0} max={1} step={0.01}
            onChange={v => setTweak('headlineGrayOpacity', v)}/>
        </TweaksPanel>
      )}
    </section>
  );
}

// TODAY chapter
function AToday() {
  const m = useIsMobile();
  return (
    <section id="today" style={{ background: DA.bg, padding: m ? '64px 20px' : '140px 40px', fontFamily: DA.font, scrollMarginTop: 64 }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: m ? 40 : 80 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 24 }}>
            THE HOME SCREEN
          </div>
          <Reveal>
          <h2 style={{
            fontSize: m ? 72 : 168, fontWeight: 800, letterSpacing: '-0.055em',
            margin: 0, paddingBottom: '0.24em', color: DA.ink, lineHeight: 1.0,
          }}>Today<ADot/></h2>
        </Reveal>
          <p style={{
            fontSize: m ? 19 : 26, lineHeight: 1.35, color: DA.text2,
            margin: 0, maxWidth: 720, fontWeight: 400, textWrap: 'pretty',
          }}>
            Every job. Every dollar. Every customer waiting. <strong style={{ color: DA.ink, fontWeight: 600 }}>One screen.</strong>
          </p>
        </div>

        {/* Phone + side callouts */}
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 380px 1fr', gap: m ? 40 : 60, alignItems: 'center', minHeight: m ? 0 : 760 }}>
          {/* Left callouts — the Next Up card, the hero of Today */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 32 : 48, textAlign: m ? 'left' : 'right', order: m ? 2 : 0 }}>
            <Callout title="Everything before you knock" body="Name, address, and the exact scope — pulled straight from the job. No scrolling, no digging through notes." dir={m ? 'left' : 'right'}/>
            <Callout title="Leave by, not just start at" body="Not a static guess — live GPS drive time, traffic and all. The card counts back from the appointment and tells you exactly when to put the truck in gear." dir={m ? 'left' : 'right'}/>
            <Callout title="Navigate, text, call — one tap" body="The three things you do before every job, right on the card. Big targets, built to work with a glove on." dir={m ? 'left' : 'right'}/>
          </div>

          {/* Phone center — spotlighted on the Next Up card */}
          <div style={{ display: 'flex', justifyContent: 'center', order: m ? 1 : 0, position: 'relative' }}>
            {/* glow concentrated on the upper third, where the Next Up card sits */}
            <div aria-hidden="true" style={{
              position: 'absolute', top: m ? '4%' : '6%', left: '50%',
              transform: 'translateX(-50%)',
              width: m ? 340 : 440, height: m ? 340 : 440,
              background: 'radial-gradient(circle, rgba(238,145,71,0.18) 0%, rgba(238,145,71,0) 66%)',
              pointerEvents: 'none', zIndex: 0,
            }}/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <PhoneFrame width={340} theme="dark">
                <TodayScreen theme="dark" spotlight/>
              </PhoneFrame>
            </div>
          </div>

          {/* Right callouts — top-right money, the intelligence, the alerts (top→bottom to match the screen) */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 32 : 48, order: m ? 3 : 0 }}>
            <Callout title="Today's money, always visible" body="The running total sits top-right. You always know exactly where the day stands."/>
            <Callout title="AI Job Prep, before you pull up" body="Reads the customer's history and the job notes, then tells you what to expect on site."/>
            <Callout title="Money at risk, up front" body="Overdue invoices, expiring quotes, jobs still to bill — surfaced on the screen, not buried in a menu."/>
          </div>
        </div>
      </div>
    </section>
  );
}

function Callout({ title, body, dir = 'left' }) {
  return (
    <div style={{ fontFamily: DA.font, maxWidth: 280, alignSelf: dir === 'right' ? 'flex-end' : 'flex-start' }}>
      <div style={{
        fontSize: 12, fontWeight: 700, letterSpacing: '0.14em',
        color: DA.brand, marginBottom: 10,
      }}>—</div>
      <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: DA.ink, marginBottom: 6 }}>
        {title}
      </div>
      <div style={{ fontSize: 14, lineHeight: 1.55, color: DA.text2, textWrap: 'pretty' }}>
        {body}
      </div>
    </div>
  );
}

// LEDGER chapter (light) — was "Money" under the old Today/Work/Office/Money
// nav; that surface is now Ledger (Today/Desk/Ledger + ⊕), so the chapter
// name follows the product's actual current IA instead of the retired one.
function AMoney() {
  const m = useIsMobile();
  return (
    <section id="ledger" style={{ background: DA.bg, padding: m ? '64px 20px' : '140px 40px', fontFamily: DA.font, scrollMarginTop: 64 }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: m ? 40 : 80 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 24 }}>
            QUOTE → PAID
          </div>
          <Reveal>
          <h2 style={{
            fontSize: m ? 72 : 168, fontWeight: 800, letterSpacing: '-0.055em',
            margin: 0, paddingBottom: '0.24em', color: DA.ink, lineHeight: 1.0,
          }}>Ledger<ADot/></h2>
        </Reveal>
          <p style={{
            fontSize: m ? 19 : 26, lineHeight: 1.35, color: DA.text2,
            margin: 0, maxWidth: 760, fontWeight: 400, textWrap: 'pretty',
          }}>
            Quote at the truck. Invoice from the front porch. <strong style={{ color: DA.ink, fontWeight: 600 }}>Send the invoice before you leave the driveway.</strong>
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 40 : 80, alignItems: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneFrame width={340} theme="light">
              <LedgerScreen theme="light"/>
            </PhoneFrame>
          </div>
          <div>
            <PortalScreen width={m ? 360 : 520} theme="light"/>
            <div style={{ marginTop: 24, fontSize: 13, color: DA.text3, fontFamily: DA.font }}>
              Your customer gets a clean web page — no app to install, no account to make.
              Approve, pick a time, or pay with card or bank transfer through <strong style={{ color: DA.text }}>Stripe</strong>. Standard Stripe fees apply.
            </div>
          </div>
        </div>

        {/* Money capability strip */}
        <div style={{
          marginTop: m ? 48 : 96,
          display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(3, 1fr)',
          borderTop: `1px solid ${DA.hairline}`, borderBottom: `1px solid ${DA.hairline}`,
        }}>
          {[
            ['Quotes', 'AI-drafted line items, you review and send.'],
            ['Invoices', 'Auto-drafted when you mark a job done. One tap to send.'],
            ['Reminders', 'Polite, escalating payment reminders — sent automatically on the schedule you set.'],
            ['Books', 'Expenses, mileage, profit & loss — organized monthly for your accountant.'],
            ['Snap the receipt', 'AI reads the vendor, amount, and every line item. Total logs as an expense, syncs to QuickBooks automatically when connected.'],
            ['Price Book learns', 'Every part on every receipt is saved at cost — what you paid. Future quotes pull your real prices, not guesses.'],
          ].map(([t, d], i) => (
            <div key={i} style={{
              padding: m ? '22px 18px' : '32px 24px',
              borderRight: (m ? i % 2 === 0 : i % 3 !== 2) ? `1px solid ${DA.hairline}` : 'none',
              borderTop: (m ? i >= 2 : i >= 3) ? `1px solid ${DA.hairline}` : 'none',
            }}>
              <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{t}</div>
              <div style={{ fontSize: 13, color: DA.text2, marginTop: 6, lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>

        {/* SnapExpense + Price Book callout */}
        <div style={{
          marginTop: m ? 48 : 80,
          background: DA.ink, borderRadius: 20,
          padding: m ? '36px 24px' : '56px 64px',
          display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr',
          gap: m ? 36 : 64, alignItems: 'center',
        }}>
          {/* Left: visual */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: m ? 'center' : 'flex-start' }}>
            <div style={{
              background: '#fff', borderRadius: 12, padding: '16px 20px',
              width: m ? '100%' : 300, maxWidth: 300,
              boxShadow: '0 4px 24px rgba(0,0,0,0.25)',
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: '#888', letterSpacing: '0.1em', marginBottom: 10 }}>HOME DEPOT #4821</div>
              {[
                ['3/4" Ball valve', '$8.47'],
                ['SharkBite coupling (2)', '$14.90'],
                ['Teflon tape', '$2.15'],
                ['MISC misc items', '$1.08'],
              ].map(([name, price], i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '5px 0',
                  borderBottom: i < 3 ? '1px solid #f0f0f0' : 'none',
                  opacity: name.includes('MISC') ? 0.35 : 1,
                }}>
                  <span style={{ fontSize: 12, color: '#333', fontFamily: DA.mono }}>{name}</span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#111', fontFamily: DA.mono }}>{price}</span>
                </div>
              ))}
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: '2px solid #111', display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 13, fontWeight: 700, color: '#111' }}>TOTAL</span>
                <span style={{ fontSize: 13, fontWeight: 700, color: '#111', fontFamily: DA.mono }}>$26.60</span>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: m ? '100%' : 300, maxWidth: 300 }}>
              <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.3)', fontSize: 20 }}>↓</div>
              <div style={{
                background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)',
                borderRadius: 10, padding: '12px 16px',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <Icon name="receipt" size={18} color="rgba(255,255,255,0.7)" strokeWidth={1.75}/>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>$26.60 expense logged</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>Synced to QuickBooks when connected · Materials</div>
                </div>
                <span style={{ marginLeft: 'auto', color: '#4EC98A', fontWeight: 800, fontSize: 15 }}>&#x2713;</span>
              </div>
              <div style={{
                background: 'rgba(249,115,22,0.12)', border: '1px solid rgba(249,115,22,0.3)',
                borderRadius: 10, padding: '12px 16px',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <Icon name="book-open" size={18} color="#F97316" strokeWidth={1.75}/>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>3 parts saved to Price Book</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>At cost · used in future quotes</div>
                </div>
                <span style={{ marginLeft: 'auto', color: '#F97316', fontWeight: 800, fontSize: 15 }}>&#x2713;</span>
              </div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.25)', textAlign: 'center', marginTop: 2 }}>
                MISC items filtered out automatically
              </div>
            </div>
          </div>

          {/* Right: copy */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DA.brandLight, letterSpacing: '0.12em', marginBottom: 16 }}>SNAPEXPENSE · PRICE BOOK</div>
            <h3 style={{
              fontSize: m ? 34 : 48, fontWeight: 800, letterSpacing: '-0.035em',
              color: '#fff', margin: '0 0 20px', lineHeight: 1.05, textWrap: 'pretty',
            }}>One receipt.<br/>Two jobs done<ADot dark/></h3>
            <p style={{ fontSize: m ? 15 : 17, color: 'rgba(255,255,255,0.65)', lineHeight: 1.65, margin: '0 0 20px', textWrap: 'pretty' }}>
              Snap a receipt on the job — werkd reads every line item. The total goes straight to your books and syncs to QuickBooks when connected. Every real part goes into your <strong style={{ color: '#fff' }}>Price Book at cost</strong> — what you actually paid, no markup baked in.
            </p>
            <p style={{ fontSize: m ? 15 : 17, color: 'rgba(255,255,255,0.65)', lineHeight: 1.65, margin: '0 0 28px', textWrap: 'pretty' }}>
              Next time you build a quote for a similar job, your part prices are already there. Your Price Book gets smarter with every receipt — <strong style={{ color: '#fff' }}>no guessing, no looking it up.</strong>
            </p>
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 10,
              padding: '20px 24px',
              background: 'rgba(255,255,255,0.05)', borderRadius: 12,
              border: '1px solid rgba(255,255,255,0.08)',
            }}>
              {[
                'AI reads vendor, amount, and every line item',
                'Junk lines (tax, fees, MISC) filtered out automatically',
                'Parts saved at cost — markup applied at quote time',
                'Total syncs to QuickBooks or Xero automatically — when connected',
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{ color: DA.brandLight, fontWeight: 700, flexShrink: 0, marginTop: 1 }}>&#x2192;</span>
                  <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

// Closer / footer CTA
function ACloser() {
  const m = useIsMobile();
  const footCols = [
    { h: 'Product', links: [['Why werkd', '#intelligence'], ['Today', '#today'], ['Ledger', '#ledger'], ['For customers', '#customers'], ['Pricing', '#pricing'], ['ROI calculator', '#roi']] },
    { h: 'Resources', links: [['The Real Cost of "AI Included"', 'real-cost-of-ai.html']] },
    { h: 'Legal', links: [['Privacy', WERKD_URLS.privacy], ['Terms', WERKD_URLS.terms], ['DPA', WERKD_URLS.dpa], ['Security', WERKD_URLS.security], ['DMCA', WERKD_URLS.dmca], ['Do Not Sell My Info', WERKD_URLS.doNotSell]] },
  ];
  return (
    <section style={{
      background: DA.ink, color: '#fff',
      padding: m ? '88px 20px 40px' : '180px 40px 56px',
      textAlign: 'center', fontFamily: DA.font,
      position: 'relative', overflow: 'hidden',
    }}>


      <Reveal>
          <h2 style={{
        fontSize: m ? 40 : 80, fontWeight: 800, letterSpacing: '-0.045em',
        margin: '0 auto 32px', maxWidth: 780, lineHeight: 1.05,
        textWrap: 'balance',
        position: 'relative',
      }}>
        What would you do with<br/>
        <span style={{ color: DA.brandLight }}>your evenings back<span style={{ color: DA.brandLight }}>?</span></span>
      </h2>
        </Reveal>
      <p style={{
        margin: '0 auto 48px', maxWidth: 540,
        fontSize: m ? 17 : 20, lineHeight: 1.45,
        color: 'rgba(255,255,255,0.7)', fontWeight: 400,
        position: 'relative',
      }}>
        Free for 14 days. No card. No contract. Cancel anytime.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', position: 'relative', flexWrap: 'wrap' }}>
        <APrimaryButton dark big onClick={() => window.openEarlyAccess()}>Request early access →</APrimaryButton>
        <ASecondaryButton dark big href={WERKD_URLS.contact}>Questions? Email us</ASecondaryButton>
      </div>

      {/* Footer */}
      <footer style={{
        marginTop: m ? 72 : 140, paddingTop: m ? 44 : 64,
        borderTop: '1px solid rgba(255,255,255,0.1)',
        textAlign: 'left', maxWidth: 1120, marginInline: 'auto',
        position: 'relative',
      }}>
        {/* Top: brand + link columns */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: m ? '1fr 1fr' : '1.5fr 1fr 1fr 0.8fr',
          gap: m ? 32 : 56,
          alignItems: 'start',
        }}>
          {/* Brand block */}
          <div style={{ gridColumn: m ? '1 / -1' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <WerkdMark size={36}/>
              <WerkdWordmark size={18} color="#fff"/>
            </div>
            <div style={{
              fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.55)',
              maxWidth: 280, marginBottom: 18, textWrap: 'pretty',
            }}>
              The AI business app for trades. You do the work — werkd does the rest.
            </div>
            <button type="button" onClick={() => window.openEarlyAccess()} className="w-shimmer" style={{
              display: 'inline-block', padding: '10px 18px',
              background: DA.brandLight, color: DA.ink, borderRadius: 4, border: 'none', cursor: 'pointer',
              fontSize: 13, fontWeight: 700, fontFamily: DA.font,
            }}>Request early access →</button>
            <div style={{ marginTop: 20, fontSize: 13.5, color: 'rgba(255,255,255,0.55)' }}>
              Questions? <a href={WERKD_URLS.contact} className="w-navlink" style={{ color: 'rgba(255,255,255,0.85)', fontWeight: 600, textDecoration: 'none' }}>contact@werkd.pro</a>
            </div>
          </div>

          {/* Link columns */}
          {footCols.map((col) => (
            <div key={col.h}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                color: 'rgba(255,255,255,0.4)', marginBottom: 16, textTransform: 'uppercase',
              }}>{col.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {col.links.map(([label, href]) => {
                  const ext = /^https?:/.test(href);
                  return (
                  <a key={label} href={href} {...(ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})} className="w-navlink" style={{
                    fontSize: 13.5, color: 'rgba(255,255,255,0.7)', fontWeight: 500,
                    textDecoration: 'none', width: 'fit-content',
                  }}>{label}</a>
                );})}
              </div>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div style={{
          marginTop: m ? 40 : 56, paddingTop: 24,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, flexWrap: 'wrap',
        }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>© 2026 Werkd, Inc. All rights reserved.</div>
          <div style={{ display: 'flex', gap: 20, fontSize: 12, color: 'rgba(255,255,255,0.62)' }}>
            <span>Built for tradespeople.</span>
          </div>
        </div>
      </footer>
    </section>
  );
}

// CUSTOMERS chapter
function ACustomers() {
  const m = useIsMobile();
  return (
    <section style={{ background: DA.bgAlt, padding: m ? '64px 20px' : '140px 40px', fontFamily: DA.font }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: m ? 40 : 80 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brand, letterSpacing: '0.14em', marginBottom: 24 }}>
            YOUR PEOPLE
          </div>
          <Reveal>
          <h2 style={{
            fontSize: m ? 56 : 168, fontWeight: 800, letterSpacing: '-0.055em',
            margin: '0 0 24px', color: DA.ink, lineHeight: 0.92,
          }}>Customers<ADot/></h2>
        </Reveal>
          <p style={{
            fontSize: m ? 19 : 26, lineHeight: 1.35, color: DA.text2,
            margin: 0, maxWidth: 760, fontWeight: 400, textWrap: 'pretty',
          }}>
            Every job. Every conversation. Every dollar — attached to the person who paid it.
            <strong style={{ color: DA.ink, fontWeight: 600 }}> Werkd remembers, so you don't have to.</strong>
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 360px 1fr', gap: m ? 36 : 60, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 32 : 48, textAlign: m ? 'left' : 'right', order: m ? 2 : 0 }}>
            <Callout title="Lifetime value, at a glance" body="Every customer card shows what they've spent, how many jobs you've done, and when they last booked." dir={m ? 'left' : 'right'}/>
            <Callout title="Werkd remembers" body="Last service was 11 months ago? Werkd suggests the follow-up text before you forget." dir={m ? 'left' : 'right'}/>
            <Callout title="History, threaded" body="Quotes, jobs, payments, photos, notes — chronological. One screen per customer." dir={m ? 'left' : 'right'}/>
          </div>

          <div style={{ display: 'flex', justifyContent: 'center', order: m ? 1 : 0 }}>
            <PhoneFrame width={340} theme="light">
              <CustomersScreen theme="light"/>
            </PhoneFrame>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 32 : 48, order: m ? 3 : 0 }}>
            <Callout title="Import your customers in 30 seconds" body="Spreadsheet, Google Contacts, or QuickBooks — werkd merges duplicates as it goes."/>
            <Callout title="Flag who matters" body="Annual maintenance · VIP · payment-touchy · slow-pay. Filter the whole list in one tap."/>
            <Callout title="Customer → new job, one tap" body='See a customer card, tap "+ Job", werkd pre-fills the address, the rate, the contact preference.'/>
          </div>
        </div>

        {/* CRM strip */}
        <div style={{
          marginTop: m ? 48 : 96,
          display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(4, 1fr)',
          borderTop: `1px solid ${DA.hairline}`, borderBottom: `1px solid ${DA.hairline}`,
        }}>
          {[
            ['Helps catch duplicates', 'Imports collapse obvious duplicates on conflict and flag the rest for review.'],
            ['Smart suggestions', 'Quarterly checkups, renewal nudges, slow-pay flags — surfaced for your approval.'],
            ['Text from the card', 'One tap opens your phone to text them — their number and history right there.'],
            ['Outstanding balances', 'See exactly what they owe you, right on the card.'],
          ].map(([t, d], i) => (
            <div key={i} style={{
              padding: m ? '22px 18px' : '32px 24px',
              borderRight: (m ? i % 2 === 0 : i < 3) ? `1px solid ${DA.hairline}` : 'none',
              borderTop: m && i >= 2 ? `1px solid ${DA.hairline}` : 'none',
            }}>
              <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{t}</div>
              <div style={{ fontSize: 13, color: DA.text2, marginTop: 6, lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// FAQ
function FAQItem({ q, a, isOpen, onToggle, m }) {
  const ref = React.useRef(null);
  const [h, setH] = React.useState(0);
  React.useLayoutEffect(() => {
    const measure = () => { if (ref.current) setH(ref.current.scrollHeight); };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [a, m]);
  return (
    <div style={{
      borderBottom: `1px solid ${DA.hairline}`,
      padding: '4px 0',
    }}>
      <button
        className="w-faq-summary"
        aria-expanded={isOpen}
        onClick={onToggle}
        style={{
          width: '100%', textAlign: 'left',
          background: 'none', border: 'none', font: 'inherit',
          padding: '24px 0',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          gap: 24,
          cursor: 'pointer',
          fontSize: 19, fontWeight: 600,
          letterSpacing: '-0.01em',
          textWrap: 'balance',
        }}>
        <span style={{
          transition: 'color 0.3s ease',
          color: isOpen ? DA.brand : DA.ink,
        }}>{q}</span>
        <span style={{
          flexShrink: 0,
          width: 32, height: 32, borderRadius: '50%',
          border: `1px solid ${isOpen ? DA.brand : DA.hairline}`,
          background: isOpen ? DA.brand : 'transparent',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform 0.4s cubic-bezier(0.34,1.4,0.64,1), background 0.3s ease, border-color 0.3s ease',
          transform: isOpen ? 'rotate(135deg)' : 'rotate(0deg)',
        }}><Icon name="plus" size={14} color={isOpen ? '#fff' : DA.brand} strokeWidth={2.5}/></span>
      </button>
      <div style={{
        maxHeight: isOpen ? h : 0,
        overflow: 'hidden',
        transition: 'max-height 0.44s cubic-bezier(0.4,0,0.2,1)',
      }}>
        <div ref={ref} style={{
          padding: m ? '0 0 22px 0' : '0 56px 24px 0',
          fontSize: m ? 15 : 16, lineHeight: 1.55, color: DA.text2,
          textWrap: 'pretty',
          opacity: isOpen ? 1 : 0,
          transform: isOpen ? 'translateY(0)' : 'translateY(-8px)',
          transition: 'opacity 0.4s ease 0.06s, transform 0.4s ease 0.06s',
        }}>
          {a}
        </div>
      </div>
    </div>
  );
}

function AFAQ() {
  const items = [
    {
      q: 'Do I need a separate scheduling app, CRM, invoicing tool, and bookkeeper?',
      a: 'No — Today, Desk, Ledger, plus the ⊕ button to capture anything. That\'s the whole app: scheduling, CRM, quotes, invoices, and payments in one. The books stay organized as you go, which shrinks the cleanup a bookkeeper would normally charge for. For taxes, payroll, and accounting advice, keep your accounting pro — werkd makes their job easier, it doesn\'t do it.',
    },
    {
      q: 'Does it work offline? My basement signal is garbage.',
      a: 'Yes. Werkd keeps working offline — quotes, jobs, photos, and timers all keep going when you\'re in a crawl space or a dead zone. It syncs the moment you have signal again.',
    },
    {
      q: 'Will my customers have to download an app?',
      a: 'They start with a link — no account, no App Store. After opening it, they can add it to their home screen in one tap for push notifications and quick access.',
    },
    {
      q: 'How fast is "Photo Diagnosis," really?',
      a: 'Fast enough to draft a quote while you\'re still standing next to the unit. Werkd uses multiple frontier vision models to suggest a likely cause, propose materials and labor, and queue up a quote draft. You review the draft — nothing goes to the customer until you tap send. Use it as a second set of eyes, not a certified diagnosis.',
    },
    {
      q: 'What about my QuickBooks, my Stripe, my existing customer list?',
      a: 'Stripe is the payments engine — it\'s built in. Spreadsheet / Google Contacts / QuickBooks all import in one screen, with duplicate-merge. When connected, every invoice and expense syncs to QuickBooks or Xero automatically as you go.',
    },
    {
      q: 'I run a 4-truck crew. Can my techs use it without seeing the money side?',
      a: `Yes. Roles are baked in. Owners get the full app. Techs see Today — their jobs, their route, their daily log — at $${P.seat}/mo per tech. Dispatchers see the board. Nobody sees money unless you say so.`,
    },
    {
      q: 'What trades does werkd work for?',
      a: 'Plumbing, electrical, HVAC, roofing, landscaping, appliance repair, flooring, concrete, pool service, pest control, septic, and general contracting — 17 trades modeled on day one, each with its own rate card and job catalog. If your trade isn\'t on the list, werkd still works — you\'d start with a blank rate card and build it your way.',
    },
    {
      q: 'What happens to my data if I cancel?',
      a: 'It\'s yours. You can export your customers, invoices, quotes, and jobs from the app at any time — before or after you cancel. We don\'t hold your data hostage.',
    },
    {
      q: 'What does it cost?',
      a: `$${P.owner}/mo for you, with everything included — portal, voice, photo diagnosis, books, dispatch, the works. Extra hands (techs and other non-admin users) are $${P.seat}/mo each. Free for ${P.trialDays} days, no card. No feature add-ons, no contract. Prefer annual? $${P.ownerAnnual}/year for the owner and $${P.seatAnnual}/year per extra tech, saving $${P.annual - P.ownerAnnual} and $${P.seat * 12 - P.seatAnnual}/seat. The calculator above (move the sliders) shows what most trades net.`,
    },
  ];

  const m = useIsMobile();
  const [open, setOpen] = React.useState(null);
  return (
    <section style={{ background: DA.bg, padding: m ? '40px 20px 64px' : '60px 40px 140px', fontFamily: DA.font }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: m ? 36 : 64 }}>
          <Reveal>
          <h2 style={{
            fontSize: m ? 48 : 88, fontWeight: 800, letterSpacing: '-0.045em',
            margin: '0 0 16px', color: DA.ink, lineHeight: 0.96,
          }}>Questions<ADot/></h2>
        </Reveal>
          <p style={{
            fontSize: 18, color: DA.text2, lineHeight: 1.45,
            margin: '0 auto', maxWidth: 540,
          }}>
            Short answers. Anything else? Email us at <a href={WERKD_URLS.contact} style={{ color: DA.brand, textDecoration: 'none', fontWeight: 600 }}>contact@werkd.pro</a>
          </p>
        </div>

        <div style={{ borderTop: `1px solid ${DA.hairline}` }}>
          {items.map((it, i) => (
            <FAQItem
              key={i}
              q={it.q}
              a={it.a}
              m={m}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? null : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function AHowItWorks() {
  const m = useIsMobile();
  const steps = [
    { n: '01', t: 'Book & route the day', d: 'Jobs land on your calendar and slot into your route automatically — no double-booking, no backtracking across town.', icon: 'calendar' },
    { n: '02', t: 'Quote, work, invoice', d: 'Werkd drafts the quote on-site and the invoice when you mark the job done. You read it, tap approve, and send.', icon: 'file-text' },
    { n: '03', t: 'Get paid & close out', d: 'Customers pay through your branded portal. Expenses, mileage, and books update themselves — ready for your accountant.', icon: 'dollar' },
  ];
  return (
    <section style={{ background: DA.bgAlt, padding: m ? '56px 20px' : '120px 40px', fontFamily: DA.font }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: m ? 40 : 64 }}>
          <Reveal>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.2em', color: DA.brand, marginBottom: 16 }}>HOW IT WORKS</div>
            <h2 style={{ fontSize: m ? 40 : 72, fontWeight: 800, letterSpacing: '-0.04em', margin: 0, color: DA.ink, lineHeight: 0.98, textWrap: 'balance' }}>
              The whole job, start to paid<ADot/>
            </h2>
            <p style={{ fontSize: m ? 16 : 20, color: DA.text2, margin: '16px auto 0', maxWidth: 580, lineHeight: 1.45, textWrap: 'pretty' }}>
              Three steps, same as your day — werkd handles the booking, quoting, invoicing, and books in the background, so you can stay on the tools.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 16 : 28 }}>
          {steps.map((s, i) => (
            <Slide key={i} delay={i * 120} from="up" distance={16}>
              <div style={{ background: '#fff', border: `1px solid ${DA.hairline}`, borderRadius: 16, padding: m ? '28px 24px' : '36px 32px', height: '100%', boxSizing: 'border-box' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 700, color: DA.brand, letterSpacing: '0.05em' }}>{s.n}</span>
                  <span style={{ width: 46, height: 46, borderRadius: 12, background: 'rgba(238,145,71,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={s.icon} size={22} color={DA.brand} strokeWidth={1.75}/>
                  </span>
                </div>
                <h3 style={{ fontSize: m ? 22 : 26, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 10px', color: DA.ink }}>{s.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: DA.text2, margin: 0, textWrap: 'pretty' }}>{s.d}</p>
              </div>
            </Slide>
          ))}
        </div>
      </div>
    </section>
  );
}

function AInlineCTA({ heading, sub }) {
  const m = useIsMobile();
  return (
    <section style={{ background: DA.bg, padding: m ? '4px 20px 24px' : '8px 40px 32px', fontFamily: DA.font }}>
      <Reveal>
      <div style={{
        maxWidth: 1120, margin: '0 auto',
        display: 'flex', flexDirection: m ? 'column' : 'row',
        alignItems: 'center', justifyContent: 'space-between', gap: m ? 18 : 24,
        padding: m ? '28px 24px' : '30px 44px',
        background: DA.ink, borderRadius: 18, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at left, rgba(238,145,71,0.14), transparent 62%)', pointerEvents: 'none' }}/>
        <div style={{ textAlign: m ? 'center' : 'left', position: 'relative' }}>
          <div style={{ fontSize: m ? 22 : 27, fontWeight: 800, letterSpacing: '-0.025em', color: '#fff', lineHeight: 1.1 }}>{heading}</div>
          {sub && <div style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>{sub}</div>}
        </div>
        <div style={{ flexShrink: 0, position: 'relative' }}>
          <APrimaryButton dark big onClick={() => window.openEarlyAccess()}>Request early access <Icon name="chevron-right" size={18} color={DA.ink}/></APrimaryButton>
        </div>
      </div>
      </Reveal>
    </section>
  );
}

function DirectionA() {
  return (
    <div className="w-artboard" style={{ background: DA.bg, fontFamily: DA.font, color: DA.text }}>
      <a className="w-skip-link" href="#maincontent">Skip to main content</a>
      <ANav/>
      <main id="maincontent">
        <AHero/>
        <AHowItWorks/>
        <ATradeIntelligence/>
        <AInlineCTA heading="The work gets done. The paperwork doesn't follow you home." sub="werkd drafts the invoices, follow-ups, and books before you're back in the driveway. Request early access — no card, no spam."/>
        {window.ALoadedDayOne && <ALoadedDayOne/>}
        <AToday/>
        {window.ALiveDemos && <ALiveDemos/>}
        <ASmartScheduling/>
        <AFieldMode/>
        <AMoney/>
        <AInlineCTA heading="Want your evenings back?" sub="Request early access — pays for itself with one extra job a month."/>
        <ACustomers/>
        <ACustomerApp/>
        <AROICalculator/>
        <APricingV2/>
        <AFAQ/>
        <ACloser/>
      </main>
      {window.DemoModal && <DemoModal/>}
      {window.EarlyAccessModal && <EarlyAccessModal/>}
    </div>
  );
}

window.DirectionA = DirectionA;