// A full-width section band with consistent rhythm. tone: "paper" (default) | "dark".
function Section({ id, tone = "paper", children, style }) {
  const dark = tone === "dark";
  return <section id={id} className={"v2-section" + (dark ? " v2-dark" : "")}
    style={{ background: dark ? "var(--ink)" : "transparent", color: dark ? "var(--bg)" : "var(--ink)", ...style }}>
    <div className="wrap">{children}</div>
  </section>;
}
// Centered section header: mono eyebrow + display-ish heading + optional sub.
function SectionHead({ eyebrow, title, sub, center = true }) {
  return <div className="v2-head" style={{ textAlign: center ? "center" : "left", maxWidth: center ? 720 : "none", margin: center ? "0 auto" : 0 }}>
    {eyebrow && <div className="eyebrow" style={{ marginBottom: 14 }}>{eyebrow}</div>}
    <h2 style={{ fontSize: "clamp(30px,4.4vw,44px)", lineHeight: 1.05, letterSpacing: "-.025em", fontWeight: 700, margin: 0 }}>{title}</h2>
    {sub && <p className="v2-head-sub" style={{ fontSize: 18, lineHeight: 1.55, marginTop: 16 }}>{sub}</p>}
  </div>;
}
// Alternating product-image + copy row. flip=true puts image on the right.
function FeatureRow({ eyebrow, title, body, bullets, img, alt, flip, badge, mediaMax }) {
  return <div className={"v2-frow" + (flip ? " flip" : "")}>
    <div className="v2-frow-copy">
      {eyebrow && <div className="eyebrow" style={{ marginBottom: 12 }}>{eyebrow}{badge && <span className="v2-badge">{badge}</span>}</div>}
      <h3 style={{ fontSize: 28, lineHeight: 1.12, letterSpacing: "-.02em", fontWeight: 700, margin: "0 0 14px" }}>{title}</h3>
      <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-2)", margin: 0 }}>{body}</p>
      {bullets && <ul className="v2-bullets">{bullets.map((b, i) => <li key={i}>{b}</li>)}</ul>}
    </div>
    <div className="v2-frow-media" style={mediaMax ? { maxWidth: mediaMax, margin: "0 auto", width: "100%" } : undefined}>
      <ProductFrame src={img} alt={alt} addr={null} glow={false} />
    </div>
  </div>;
}
Object.assign(window, { Section, SectionHead, FeatureRow });

// ===== Video band — dark, the narrated tour =====
function VideoBand() {
  return <Section id="tour" tone="dark">
    <SectionHead eyebrow="SEE IT IN UNDER A MINUTE" title="Watch OrgPlease turn a spreadsheet into a living org chart" />
    <div style={{ maxWidth: 920, margin: "40px auto 0", position: "relative" }}>
      <ProductFrame src="landing/v2/images/hero-chart@2x.png" alt="OrgPlease product tour" addr={null} glow={false}>
        <VideoLightbox videoUrl="landing/v2/video/orgplease-hero-16x9.mp4" videoUrlSquare="landing/v2/video/orgplease-hero-1x1.mp4" label="Watch the tour" duration="0:51" />
      </ProductFrame>
    </div>
  </Section>;
}

// ===== How it works — three steps, stacks on mobile =====
function HowItWorks() {
  const steps = [
    { n: "01", t: "Upload your roster", d: "Drag in a CSV, Excel, or even a PowerPoint org chart — we auto-detect names, titles, and managers.", img: "landing/v2/images/step-1.png" },
    { n: "02", t: "Make it yours", d: "Map any column to any field, drag the layout, color-code, add photos and your branding.", img: "landing/v2/images/step-2.png" },
    { n: "03", t: "Share & export", d: "A read-only link with field-level privacy, or a crisp vector PDF in several layouts.", img: "landing/v2/images/step-3.png" },
  ];
  return <Section id="how">
    <SectionHead eyebrow="HOW IT WORKS" title="Three steps. The third one is honestly optional." sub="Most teams have a real, navigable org chart in about three minutes." />
    <div className="v2-steps">
      {steps.map(s => <div key={s.n} className="v2-step">
        <div className="v2-step-img"><ProductFrame src={s.img} alt={s.t} addr={null} glow={false} /></div>
        <div className="mono v2-step-n">{s.n}</div>
        <h3 style={{ fontSize: 19, fontWeight: 600, margin: "8px 0 6px", letterSpacing: "-.01em" }}>{s.t}</h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>{s.d}</p>
      </div>)}
    </div>
  </Section>;
}
Object.assign(window, { VideoBand, HowItWorks });

// ===== Feature showcase — alternating product rows =====
function FeatureShowcase() {
  const rows = [
    { eyebrow:"IMPORT", title:"Bring your data however it lives", body:"CSV, Excel, or a PowerPoint deck — we auto-detect names, titles, managers and emails, read SmartArt and connected boxes, and even stitch a chart split across slides. You preview and fix before anything saves.", img:"landing/v2/images/feat-import.png", alt:"Import a roster" },
    { eyebrow:"EDIT", title:"Fix the chart right on the chart", body:"Change a title or manager, add a hire or an open role, or drag a card to a new team to reorganize — no spreadsheet round-trip. Your edits save when you're ready. Free on every plan.", img:"landing/v2/images/feat-edit.png", alt:"Edit and drag in the chart", flip:true },
    { eyebrow:"ORG HEALTH", badge:"TEAM", title:"Know if your org is actually healthy", body:"A 0–100 score grades your structure and flags over-wide spans, deep layers, top-heavy teams and open roles — each finding one click from the chart, plus span, headcount and comp analytics.", img:"landing/v2/images/feat-health.png", alt:"Org Health score and findings" },
    { eyebrow:"SCENARIOS", badge:"TEAM", title:"Plan the reorg before it's real", body:"Fork a private scenario, rearrange freely, see the exact change list, then promote it to live in one move — without touching the real chart until you're sure.", img:"landing/v2/images/feat-scenarios.png", alt:"Scenario change list", flip:true, mediaMax:380 },
    { eyebrow:"EXPORT", title:"Exports that look like you made them", body:"A searchable vector PDF in several layouts, a re-uploadable Excel roster, and a shareable read-only link — with your logo, title and confidentiality label on a paid plan.", img:"landing/v2/images/feat-export.png", alt:"Branded export" },
  ];
  return <Section id="features">
    <SectionHead eyebrow="WHAT YOU GET" title="Everything you need. Nothing you didn't ask for." />
    <div style={{ marginTop: 56 }}>{rows.map((r, i) => <FeatureRow key={i} {...r} />)}</div>
  </Section>;
}
Object.assign(window, { FeatureShowcase });

// ===== More features — "everything else" tile grid =====
function MoreFeatures() {
  const tiles = [
    { icon:"fields",  t:"Custom fields",        d:"Map any column to any field — up to eight." },
    { icon:"photo",   t:"Employee photos",      d:"A face on every card, with a clean monogram fallback." },
    { icon:"search",  t:"Search & focus",       d:"Jump to anyone, then zoom into any subtree." },
    { icon:"views",   t:"Compact & list views", d:"Dense layouts for big orgs." },
    { icon:"privacy", t:"Field-level privacy",  d:"Share a link that hides salary or clearance — enforced server-side." },
    { icon:"pptx",    t:"PowerPoint import",    d:"Drop a .pptx (SmartArt or boxes); we rebuild it, even across slides." },
  ];
  return <Section id="more">
    <SectionHead eyebrow="ALSO INCLUDED" title="Plus everything else you'd expect" />
    <div className="v2-tiles">
      {tiles.map(t => <div key={t.t} className="v2-tile">
        <span className="v2-tile-chip" aria-hidden><TileIcon name={t.icon} /></span>
        <h3 className="v2-tile-t">{t.t}</h3>
        <p className="v2-tile-d">{t.d}</p>
      </div>)}
    </div>
  </Section>;
}
// Minimal accent-stroke SVG icons for the tile chips (24×24, currentColor).
function TileIcon({ name }) {
  const c = { width:20, height:20, viewBox:"0 0 24 24", fill:"none", stroke:"currentColor",
    strokeWidth:1.7, strokeLinecap:"round", strokeLinejoin:"round" };
  switch (name) {
    case "fields":  return <svg {...c}><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>;
    case "photo":   return <svg {...c}><circle cx="12" cy="9" r="3.2"/><path d="M5.5 19a6.5 6.5 0 0 1 13 0"/></svg>;
    case "search":  return <svg {...c}><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>;
    case "views":   return <svg {...c}><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/></svg>;
    case "privacy": return <svg {...c}><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>;
    case "pptx":    return <svg {...c}><rect x="3" y="4" width="18" height="14" rx="2"/><line x1="12" y1="18" x2="12" y2="21"/><line x1="8" y1="21" x2="16" y2="21"/></svg>;
    default:        return null;
  }
}
Object.assign(window, { MoreFeatures });

// ===== Collaboration — dark band, role chips =====
function Collaboration() {
  return <Section id="collaborate" tone="dark">
    <SectionHead
      eyebrow="COLLABORATION"
      title="Bring your whole team"
      sub="Invite teammates by email and give each one admin (full edit) or view-only access. Everyone works from the same live chart — no more emailing stale PDFs around. Free includes you; paid plans add seats."
    />
    <div className="v2-roles">
      <div className="v2-role">
        <span className="v2-role-dot" style={{ background: "var(--accent-2)" }} />
        <strong>Admin</strong>&nbsp;— full edit access
      </div>
      <div className="v2-role">
        <span className="v2-role-dot" style={{ background: "rgba(246,244,236,.5)" }} />
        <strong>Viewer</strong>&nbsp;— read-only
      </div>
    </div>
  </Section>;
}

// ===== Pricing teaser — 4 tiers, Team flagged Most popular =====
function PricingTeaser() {
  const tiers = [
    { name:"Free",     price:"$0",  note:"up to 25 employees", cta:"Start free", lines:["1 admin","CSV/Excel/PPTX import","Edit, search & share"] },
    { name:"Starter",  price:"$19", note:"/mo · up to 50",     cta:"Get Starter", lines:["3 users","Custom branding","Scenario planner"] },
    { name:"Team",     price:"$49", note:"/mo · up to 200",    cta:"Get Team", popular:true, lines:["10 users","Org Health report","Priority support"] },
    { name:"Business", price:"$99", note:"/mo · up to 1,000",  cta:"Talk to us", lines:["Unlimited users","Dedicated manager","SLA"] },
  ];
  return <Section id="pricing">
    <SectionHead eyebrow="PRICING" title="Pricing that doesn't require a procurement form." sub="Free forever for up to 25 people. No credit card to start." />
    <div className="v2-tiers">{tiers.map(t => <div key={t.name} className={"v2-tier"+(t.popular?" pop":"")}>
      {t.popular && <div className="v2-tier-flag">Most popular</div>}
      <div style={{ fontWeight:600, fontSize:16 }}>{t.name}</div>
      <div style={{ margin:"8px 0 14px" }}><span style={{ fontSize:34, fontWeight:700, letterSpacing:"-.02em" }}>{t.price}</span> <span style={{ fontSize:13, color:"var(--muted)" }}>{t.note}</span></div>
      <ul className="v2-bullets" style={{ marginTop:0, marginBottom:18 }}>{t.lines.map((l,i)=><li key={i}>{l}</li>)}</ul>
      <Btn variant={t.popular?"primary":"ghost"} size="md" href={V2_LINKS.pricing}>{t.cta}</Btn>
    </div>)}</div>
    <div style={{ marginTop:32 }}><TrustBar/></div>
  </Section>;
}
Object.assign(window, { Collaboration, PricingTeaser });

// ===== FAQ — accessible accordion (button + region, aria-expanded) =====
function FAQv2() {
  const items = [
    { q: "Do I need a credit card to start?",   a: "No. Free is genuinely free up to 25 employees and stays that way. We only ask for a card when you choose a paid plan." },
    { q: "What file formats can I upload?",      a: "CSV, Excel (.xlsx), and PowerPoint (.pptx). We auto-detect manager relationships from email IDs, names, or a manager column — and read SmartArt or connected-box charts from a deck, even across multiple slides." },
    { q: "Can I import an org chart from PowerPoint?", a: "Yes — drop a .pptx built with SmartArt or connected boxes. We preview what we found so you can fix it before it saves. Flattened image-only charts can't be read (no text to extract) — use Excel or CSV for those." },
    { q: "Can I edit the chart without re-uploading a spreadsheet?", a: "Yes. Any admin can edit right on the chart — change a title or manager, add a person or an open role, or drag a card to a new team to reorganize. Changes save when you click Save. It's free on every plan; you can still round-trip via Excel if you prefer." },
    { q: "Can OrgPlease tell me if my org structure has problems?", a: "Yes — Org Health gives your org a 0–100 score and a prioritized list of structural issues (over-wide spans, too many layers, top-heavy teams, vacancies, broken reporting links), each with a one-click jump to fix it on the chart, plus span, headcount and compensation analytics. The score shows on your Dashboard on every plan; the full report is a Team feature." },
    { q: "Can my team collaborate?",             a: "Yes. Invite teammates by email and choose each person's access — admin (full edit) or viewer (read-only). Everyone works from the same live chart. Free includes 1 user; paid plans add seats (Starter 3, Team 10, Business unlimited)." },
    { q: "How do you handle sensitive data?",    a: "Your data is encrypted in transit and at rest, with row-level security at the database layer on every plan. When you share a read-only link it shows only the fields your active preset allows — sensitive fields like salary never leave your account. Your data is yours; we never use it to train anything." },
    { q: "Can I export the chart?",              a: "Yes — a searchable vector PDF that prints crisp at any size, in several layouts (a one-page summary, the full multi-page chart, or per-department books), plus a re-uploadable Excel roster (admins can edit it and import it back) and a shareable read-only link." },
    { q: "What about huge orgs?",                a: "Business covers up to 1,000 employees. The engine itself handles much larger orgs — we've stress-tested it well past 5,000 rows — so if you're above 1,000, get in touch and we'll set up an Enterprise pilot with custom pricing." },
    { q: "Why is it called OrgPlease!?",         a: "Because every other tool made us say 'org chart, please.' We took the hint." },
  ];
  const [open, setOpen] = React.useState(0);
  return <Section id="faq">
    <SectionHead eyebrow="FAQ" title="Questions, politely answered." />
    <div className="v2-faq">
      {items.map((item, i) => {
        const isOpen = open === i;
        const panelId = "v2-faq-panel-" + i;
        const btnId = "v2-faq-btn-" + i;
        return <div key={i} className="v2-faq-item">
          <h3 style={{ margin: 0 }}>
            <button id={btnId} className="v2-faq-q" aria-expanded={isOpen} aria-controls={panelId}
              onClick={() => setOpen(isOpen ? -1 : i)}>
              <span>{item.q}</span>
              <span className="v2-faq-icon" aria-hidden>{isOpen ? "–" : "+"}</span>
            </button>
          </h3>
          <div id={panelId} role="region" aria-labelledby={btnId} hidden={!isOpen} className="v2-faq-a">
            {item.a}
          </div>
        </div>;
      })}
    </div>
  </Section>;
}

// ===== Final CTA — dark band =====
function FinalCTA() {
  return <Section id="final-cta" tone="dark">
    <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
      <div className="eyebrow" style={{ marginBottom: 18 }}>READY WHEN YOU ARE</div>
      <h2 style={{ fontSize: "clamp(40px,6.5vw,72px)", lineHeight: 1.02, letterSpacing: "-.035em", fontWeight: 700, margin: 0 }}>
        Make your org chart<br />say <span className="serif-i" style={{ color: "var(--accent-2)", fontSize: "1.08em" }}>please.</span>
      </h2>
      <p style={{ fontSize: 18, lineHeight: 1.5, color: "rgba(246,244,236,.75)", margin: "22px auto 0", maxWidth: 520 }}>
        Free up to 25 employees. Three minutes to your first chart. No credit card, no sales call, no procurement form.
      </p>
      <div style={{ marginTop: 30, display: "flex", justifyContent: "center" }}>
        <Btn variant="primary" size="lg" href={V2_LINKS.pricing}>Start free — no card →</Btn>
      </div>
      <p className="mono" style={{ marginTop: 22, fontSize: 12.5, color: "rgba(246,244,236,.5)" }}>
        Free to 25 employees · No credit card · Your data stays yours · Encrypted + RLS
      </p>
    </div>
  </Section>;
}

// ===== Footer — dark, reversed logo, link columns =====
function Footer() {
  // Preview cross-links (see V2_LINKS note in components.jsx). Reverts to clean routes at go-live.
  const cols = [
    { t: "Product", links: [{ l: "Features", h: V2_LINKS.features }, { l: "Pricing", h: V2_LINKS.pricing }, { l: "Blog", h: V2_LINKS.blog }] },
    { t: "Company", links: [{ l: "Contact", h: V2_LINKS.contact }] },
    { t: "Legal",   links: [{ l: "Privacy", h: V2_LINKS.privacy }, { l: "Terms", h: V2_LINKS.terms }, { l: "Security", h: V2_LINKS.security }] },
  ];
  return <footer className="v2-footer">
    <div className="wrap">
      <div className="v2-footer-grid">
        <div className="v2-footer-brand">
          <a href={V2_LINKS.home} aria-label="OrgPlease home" style={{ display: "inline-flex" }}>
            <img src="brand/logo-lockup-reversed.svg" alt="OrgPlease!" height="28" />
          </a>
          <p className="serif-i" style={{ marginTop: 16, fontSize: 20, lineHeight: 1.3, color: "rgba(246,244,236,.75)", maxWidth: 280 }}>
            The org chart software that finally says yes.
          </p>
        </div>
        {cols.map(c => <div key={c.t}>
          <div className="mono" style={{ fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,.6)", marginBottom: 16, letterSpacing: ".12em", textTransform: "uppercase" }}>{c.t}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {c.links.map(link => <li key={link.l}><a className="v2-footer-link" href={link.h}>{link.l}</a></li>)}
          </ul>
        </div>)}
      </div>
      <div className="v2-footer-bottom">
        <span style={{ fontSize: 13, color: "rgba(255,255,255,.62)" }}>© 2026 OrgPlease, Inc. · Made with please &amp; thank you</span>
        <span className="mono" style={{ fontSize: 12, color: "rgba(255,255,255,.62)" }}>Free to 25 · No credit card · Encrypted + RLS</span>
      </div>
    </div>
  </footer>;
}
// ===== Sticky CTA — fixed top bar, hidden until the hero scrolls out of view.
// motion.js toggles the `.visible` class (ScrollTrigger, or a scroll-listener
// fallback under reduced-motion). aria-hidden until visible so it never traps
// focus while off-screen. =====
function StickyCTA() {
  return <div className="v2-sticky-cta" role="region" aria-label="Get started">
    <div className="wrap v2-sticky-inner">
      <a href={V2_LINKS.home} aria-label="OrgPlease home" className="v2-sticky-logo">
        <img src="brand/logo-lockup.svg" alt="OrgPlease!" height="22" />
      </a>
      <Btn variant="primary" size="sm" href={V2_LINKS.pricing}>Start free — no card →</Btn>
    </div>
  </div>;
}
Object.assign(window, { FAQ: FAQv2, FinalCTA, Footer, StickyCTA });