/* Search Hive — home page sections + app
   Uses shared.jsx chrome and the bound design system. */

const { Button, Badge, Tag, Avatar, Rating, Card } = window.SearchHiveDesignSystem_3f2abd;

/* ---- imagery (Unsplash, warm/natural light) --------------------- */
const IMG = (id, w = 1100) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=80`;
const HERO_A = IMG("1522202176988-66273c2fd55f", 900);
const HERO_B = IMG("1600880292203-757bb62b4baf", 700);
const HERO_C = IMG("1531973576160-7125cd663d86", 700);

/* ================================================================= *
 * HERO
 * ================================================================= */
function Hero({ headline }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", paddingTop: "clamp(36px,6vw,72px)", paddingBottom: "clamp(48px,7vw,96px)" }}>
      <Honeycomb opacity={0.42} style={{ maskImage: "linear-gradient(180deg,#000,transparent 70%)", WebkitMaskImage: "linear-gradient(180deg,#000,transparent 70%)" }} />
      <div style={{ position: "absolute", top: -140, left: "-10%", width: 520, height: 520, borderRadius: "50%",
        background: "radial-gradient(circle, var(--sh-honey-wash), transparent 68%)", pointerEvents: "none" }} />
      <Container width={1280} style={{ position: "relative" }}>
        <div className="sh-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(32px,5vw,72px)", alignItems: "center" }}>
          {/* copy */}
          <div className="sh-reveal sh-in">
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "7px 14px 7px 8px", borderRadius: 999,
              background: "var(--canvas)", boxShadow: "var(--shadow-pill)", fontSize: 14, fontWeight: 600, color: "var(--sh-body)" }}>
              <Badge variant="new">New</Badge>
              2026 growth openings — 4 left
            </span>
            <h1 style={{ margin: "22px 0 0", fontSize: "clamp(40px,6vw,72px)", fontWeight: 700, lineHeight: 1.02, letterSpacing: "-0.03em", color: "var(--sh-ink)", textWrap: "balance" }}>
              {headline[0]}<span style={{ color: "var(--sh-honey-deep)" }}>{headline[1]}</span>{headline[2]}
            </h1>
            <p style={{ margin: "24px 0 0", maxWidth: 520, fontSize: "clamp(17px,1.7vw,20px)", lineHeight: 1.55, color: "var(--sh-body)" }}>
              We’re a growth studio that blends brand, design, and performance — so the right people find you, trust you, and come back. No fluff, just compounding results.
            </p>

            {/* on-brand search-pill CTA */}
            <form onSubmit={(e) => { e.preventDefault(); window.location.href = "contact.html"; }}
              style={{ marginTop: 30, display: "flex", alignItems: "center", gap: 8, padding: 8, maxWidth: 520,
                background: "var(--canvas)", borderRadius: 999, boxShadow: "var(--shadow-float)" }}>
              <span style={{ paddingLeft: 12, color: "var(--sh-muted)", display: "inline-flex" }}><Icon name="search" size={20} /></span>
              <input aria-label="What do you want to grow?" placeholder="What do you want to grow?" defaultValue=""
                style={{ flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 16, color: "var(--sh-ink)" }} />
              <Button pill size="md" type="submit" trailingIcon={<Icon name="arrow-right" size={18} stroke={2.4} />}>Search</Button>
            </form>

            <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 26, flexWrap: "wrap" }}>
              <div style={{ display: "flex" }}>
                {["1494790108377-be9c29b29330", "1500648767791-00dcc994a43e", "1438761681033-6461ffad8d80", "1507003211169-0a1dd7228f2d"].map((id, i) => (
                  <img key={id} src={IMG(id, 120)} alt="" style={{ width: 40, height: 40, borderRadius: 999, objectFit: "cover", border: "2px solid var(--canvas)", marginLeft: i ? -12 : 0 }} />
                ))}
              </div>
              <div>
                <Rating value={4.9} count={120} />
                <p style={{ margin: "2px 0 0", fontSize: 13.5, color: "var(--sh-muted)" }}>Average rating from brands in the hive</p>
              </div>
            </div>
          </div>

          {/* image cluster */}
          <div className="sh-hero-art sh-reveal sh-in" style={{ position: "relative", minHeight: 460 }}>
            <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-float)", aspectRatio: "4/5" }}>
              <img src={HERO_A} alt="Search Hive team at work" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{ position: "absolute", bottom: -22, left: -26, width: "46%", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-float)", border: "4px solid var(--canvas)", aspectRatio: "1/1" }} className="sh-hero-mini">
              <img src={HERO_C} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            {/* floating stat card */}
            <div className="sh-hero-stat" style={{ position: "absolute", top: 24, right: -24, background: "var(--canvas)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-float)", padding: "16px 18px", display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 44, height: 44, borderRadius: 12, background: "var(--sh-honey-wash)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="trending-up" size={22} color="var(--sh-honey-deep)" />
              </span>
              <div>
                <p style={{ margin: 0, fontSize: 22, fontWeight: 800, color: "var(--sh-ink)", letterSpacing: "-0.02em" }}>+312%</p>
                <p style={{ margin: 0, fontSize: 12.5, color: "var(--sh-muted)" }}>median organic growth</p>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * STATS
 * ================================================================= */
const STATS = [
  { n: "3.4×", l: "average return on ad spend" },
  { n: "120+", l: "brands growing in the hive" },
  { n: "312%", l: "median organic growth" },
  { n: "48M", l: "monthly impressions shaped" },
];
function Stats() {
  return (
    <section style={{ padding: "clamp(28px,4vw,44px) 0" }}>
      <Container width={1280}>
        <div className="sh-stats-grid sh-reveal" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 1, background: "var(--sh-hairline)", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--sh-hairline)" }}>
          {STATS.map((s) => (
            <div key={s.l} style={{ background: "var(--canvas)", padding: "clamp(22px,3vw,34px)", textAlign: "center" }}>
              <p style={{ margin: 0, fontSize: "clamp(34px,4.4vw,52px)", fontWeight: 800, letterSpacing: "-0.03em", color: "var(--sh-ink)", lineHeight: 1 }}>{s.n}</p>
              <p style={{ margin: "10px 0 0", fontSize: 14.5, color: "var(--sh-muted)", lineHeight: 1.4 }}>{s.l}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * SERVICES
 * ================================================================= */
const SERVICES = [
  { icon: "palette", t: "Brand & identity", d: "Naming, logo systems, and a voice that sounds like you — built to scale across every surface." },
  { icon: "target", t: "Performance marketing", d: "Paid search, social, and retargeting that earns its keep. We optimise to revenue, not vanity clicks." },
  { icon: "pen-tool", t: "Web & product design", d: "Fast, warm, conversion-led sites and product UI — designed and built end to end." },
  { icon: "search", t: "Content & SEO", d: "Topic authority, technical health, and stories worth ranking. Compounding traffic, month over month." },
  { icon: "megaphone", t: "Social & creative", d: "Thumb-stopping creative and always-on community that turns audiences into advocates." },
  { icon: "compass", t: "Growth strategy", d: "A clear, honest roadmap with the metrics that matter — so every sprint moves a real number." },
];
function ServiceCard({ s }) {
  const [h, setH] = React.useState(false);
  return (
    <a href="services.html" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textDecoration: "none", display: "block", height: "100%" }}>
      <Card bordered floating={h} style={{ height: "100%", padding: 28, transition: "transform 180ms ease, box-shadow 180ms ease", transform: h ? "translateY(-4px)" : "none", display: "flex", flexDirection: "column" }}>
        <span style={{ width: 52, height: 52, borderRadius: 14, background: h ? "var(--sh-honey)" : "var(--sh-honey-wash)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background 180ms ease" }}>
          <Icon name={s.icon} size={24} color={h ? "var(--sh-ink)" : "var(--sh-honey-deep)"} stroke={2.1} />
        </span>
        <h3 style={{ margin: "20px 0 0", fontSize: 21, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--sh-ink)" }}>{s.t}</h3>
        <p style={{ margin: "10px 0 0", fontSize: 15.5, lineHeight: 1.55, color: "var(--sh-body)", flex: 1 }}>{s.d}</p>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 20, fontSize: 14.5, fontWeight: 600, color: "var(--sh-ink)" }}>
          Explore <Icon name="arrow-right" size={16} stroke={2.4} style={{ transform: h ? "translateX(4px)" : "none", transition: "transform 180ms ease" }} />
        </span>
      </Card>
    </a>
  );
}
function Services() {
  return (
    <section id="services" style={{ padding: "calc(clamp(48px,7vw,88px) * var(--sh-dens,1)) 0", background: "var(--surface-soft)" }}>
      <Container width={1280}>
        <div className="sh-reveal" style={{ maxWidth: 640 }}>
          <Eyebrow icon="layers">What we do</Eyebrow>
          <h2 style={{ margin: "16px 0 0", fontSize: "clamp(30px,4.2vw,46px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.08, color: "var(--sh-ink)" }}>
            One studio, the whole growth stack
          </h2>
          <p style={{ margin: "16px 0 0", fontSize: "clamp(16px,1.6vw,18px)", lineHeight: 1.6, color: "var(--sh-body)" }}>
            Strategy, brand, build, and media — handled by one tight team that actually talks to each other. No handoffs lost in translation.
          </p>
        </div>
        <div className="sh-services-grid sh-reveal" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {SERVICES.map((s) => <ServiceCard key={s.t} s={s} />)}
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * APPROACH / PROCESS
 * ================================================================= */
const STEPS = [
  { n: "01", t: "Listen", d: "We start with your customers, your numbers, and your goals — not a template. A week of discovery before a single pixel." },
  { n: "02", t: "Map", d: "A clear plan: the moves, the metrics, the timeline. You’ll know exactly what we’re doing and why." },
  { n: "03", t: "Make", d: "Brand, site, and campaigns built fast and tested in the wild. Small bets, quick reads, sharp iteration." },
  { n: "04", t: "Scale", d: "We double down on what works and cut what doesn’t — compounding the wins month after month." },
];
function Approach() {
  return (
    <section id="approach" style={{ padding: "calc(clamp(48px,7vw,88px) * var(--sh-dens,1)) 0" }}>
      <Container width={1280}>
        <div className="sh-approach-head sh-reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow icon="compass">How we work</Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: "clamp(30px,4.2vw,46px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.08, color: "var(--sh-ink)" }}>
              A calm, honest way to grow
            </h2>
          </div>
          <p style={{ maxWidth: 420, margin: 0, fontSize: 16.5, lineHeight: 1.6, color: "var(--sh-body)" }}>
            Four phases, run in tight loops. You’re never more than a week from a result you can see.
          </p>
        </div>
        <div className="sh-steps-grid sh-reveal" style={{ marginTop: 44, display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
          {STEPS.map((s, i) => (
            <div key={s.n} style={{ position: "relative", paddingTop: 26, borderTop: "2px solid var(--sh-hairline)" }}>
              <span style={{ position: "absolute", top: -2, left: 0, width: 64, height: 2, background: "var(--sh-honey)" }} />
              <p style={{ margin: 0, fontSize: 15, fontWeight: 800, letterSpacing: "0.06em", color: "var(--sh-honey-deep)" }}>{s.n}</p>
              <h3 style={{ margin: "12px 0 0", fontSize: 24, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--sh-ink)" }}>{s.t}</h3>
              <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.55, color: "var(--sh-body)" }}>{s.d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * WORK / CASE STUDIES
 * ================================================================= */
const WORK = [
  { img: IMG("1441986300917-64674bd600d8", 1100), tag: "Retail · Brand + Web", client: "Marigold & Oak", result: "Rebrand + Shopify rebuild lifts revenue per visitor", metric: "+214%", metricLabel: "revenue / visitor", featured: true },
  { img: IMG("1556742049-0cfed4f6a45d", 700), tag: "DTC food", client: "Honeycomb Kitchen", result: "Performance media at a profitable 4.1× ROAS", metric: "4.1×", metricLabel: "ROAS" },
  { img: IMG("1542291026-7eec264c27ff", 700), tag: "Footwear", client: "Stride Republic", result: "SEO + content engine triples organic sessions", metric: "+308%", metricLabel: "organic traffic" },
];
function WorkCard({ w, featured }) {
  const [h, setH] = React.useState(false);
  return (
    <a href="case-study.html" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textDecoration: "none", display: "block", height: "100%" }}>
      <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: featured ? "16/10" : "4/3", boxShadow: h ? "var(--shadow-float)" : "none", transition: "box-shadow 200ms ease" }}>
        <img src={w.img} alt={w.client} style={{ width: "100%", height: "100%", objectFit: "cover", transform: h ? "scale(1.04)" : "scale(1)", transition: "transform 420ms ease" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,16,10,0) 38%, rgba(20,16,10,0.82))" }} />
        <div style={{ position: "absolute", top: 16, left: 16 }}><Badge variant="floating">{w.tag}</Badge></div>
        <div style={{ position: "absolute", right: 16, top: 16, background: "var(--sh-honey)", color: "var(--sh-ink)", borderRadius: 14, padding: "10px 14px", textAlign: "right" }}>
          <p style={{ margin: 0, fontSize: featured ? 30 : 24, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1 }}>{w.metric}</p>
          <p style={{ margin: "2px 0 0", fontSize: 11.5, fontWeight: 600 }}>{w.metricLabel}</p>
        </div>
        <div style={{ position: "absolute", left: 20, right: 20, bottom: 18, color: "#fff" }}>
          <p style={{ margin: 0, fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.78)" }}>{w.client}</p>
          <p style={{ margin: "6px 0 0", fontSize: featured ? 22 : 18, fontWeight: 700, lineHeight: 1.25, letterSpacing: "-0.01em", maxWidth: 420 }}>{w.result}</p>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 12, fontSize: 14, fontWeight: 600, color: "#fff" }}>
            Read case study <Icon name="arrow-right" size={16} stroke={2.4} style={{ transform: h ? "translateX(4px)" : "none", transition: "transform 180ms ease" }} />
          </span>
        </div>
      </div>
    </a>
  );
}
function Work() {
  return (
    <section id="work" style={{ padding: "calc(clamp(48px,7vw,88px) * var(--sh-dens,1)) 0", background: "var(--surface-soft)" }}>
      <Container width={1280}>
        <div className="sh-approach-head sh-reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow icon="trending-up">Proven work</Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: "clamp(30px,4.2vw,46px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.08, color: "var(--sh-ink)" }}>
              Growth you can point to
            </h2>
          </div>
          <a href="case-study.html" style={{ textDecoration: "none" }}>
            <Button pill variant="secondary" size="sm" trailingIcon={<Icon name="arrow-right" size={16} stroke={2.4} />}>All case studies</Button>
          </a>
        </div>
        <div className="sh-work-grid sh-reveal" style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20 }}>
          <div style={{ gridRow: "span 2" }}><WorkCard w={WORK[0]} featured /></div>
          <WorkCard w={WORK[1]} />
          <WorkCard w={WORK[2]} />
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * TESTIMONIALS
 * ================================================================= */
const QUOTES = [
  { q: "Search Hive rebuilt our brand and our funnel in one go. Six months in, paid is finally profitable and the site converts twice as well.", name: "Priya Menon", role: "Founder, Marigold & Oak", img: "1494790108377-be9c29b29330", rating: 5 },
  { q: "The most honest agency we’ve worked with. They cut the budget we were wasting and put it where it actually moved revenue.", name: "Daniel Osei", role: "CMO, Honeycomb Kitchen", img: "1500648767791-00dcc994a43e", rating: 5 },
  { q: "They treat our numbers like their own. Organic traffic tripled and we finally rank for the terms that matter.", name: "Sara Lindqvist", role: "Head of Growth, Stride Republic", img: "1438761681033-6461ffad8d80", rating: 5 },
];
function QuoteCard({ q }) {
  return (
    <Card bordered style={{ padding: 28, display: "flex", flexDirection: "column", height: "100%" }}>
      <Icon name="quote" size={26} color="var(--sh-honey)" />
      <p style={{ margin: "16px 0 0", fontSize: 17, lineHeight: 1.55, color: "var(--sh-ink)", flex: 1 }}>“{q.q}”</p>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 22 }}>
        <Avatar src={IMG(q.img, 120)} name={q.name} size={44} ring />
        <div style={{ flex: 1 }}>
          <p style={{ margin: 0, fontSize: 15, fontWeight: 700, color: "var(--sh-ink)" }}>{q.name}</p>
          <p style={{ margin: 0, fontSize: 13.5, color: "var(--sh-muted)" }}>{q.role}</p>
        </div>
        <Rating value={5} showCount={false} />
      </div>
    </Card>
  );
}
function Testimonials() {
  return (
    <section style={{ padding: "calc(clamp(48px,7vw,88px) * var(--sh-dens,1)) 0" }}>
      <Container width={1280}>
        <div className="sh-reveal" style={{ maxWidth: 640 }}>
          <Eyebrow icon="message-circle">In their words</Eyebrow>
          <h2 style={{ margin: "16px 0 0", fontSize: "clamp(30px,4.2vw,46px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.08, color: "var(--sh-ink)" }}>
            Brands that found their place
          </h2>
        </div>
        <div className="sh-quote-grid sh-reveal" style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {QUOTES.map((q) => <QuoteCard key={q.name} q={q} />)}
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * FAQ
 * ================================================================= */
const FAQS = [
  { q: "How do you price engagements?", a: "Most work runs as a monthly retainer scoped to your goals, with a fixed-fee sprint for one-off brand or web builds. You’ll always have a clear number before we start — no surprise invoices." },
  { q: "How fast will we see results?", a: "You’ll see a working plan within two weeks and live experiments by week four. Paid channels often move first; brand and SEO compound over the following quarters." },
  { q: "Do you work with our existing team?", a: "Often. We can run the whole growth function or plug into your in-house team as the specialist layer — strategy, creative, or media." },
  { q: "What size brands do you take on?", a: "From funded seed-stage startups to established mid-market brands. The common thread is a real product and an appetite to grow honestly." },
  { q: "Which industries do you know best?", a: "Consumer and DTC, marketplaces, hospitality, and B2B SaaS. If your customers search for what you do, we can help them find you." },
];
function FAQItem({ f, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--sh-hairline)" }}>
      <button onClick={onToggle} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "22px 0", background: "none", border: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-sans)" }}>
        <span style={{ fontSize: "clamp(17px,2vw,20px)", fontWeight: 600, color: "var(--sh-ink)", letterSpacing: "-0.01em" }}>{f.q}</span>
        <span style={{ width: 36, height: 36, borderRadius: 999, background: open ? "var(--sh-honey)" : "var(--surface-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none", transition: "background 160ms ease" }}>
          <Icon name={open ? "minus" : "plus"} size={18} color="var(--sh-ink)" stroke={2.4} />
        </span>
      </button>
      <div style={{ maxHeight: open ? 240 : 0, overflow: "hidden", transition: "max-height 280ms ease" }}>
        <p style={{ margin: 0, padding: "0 0 24px", maxWidth: 720, fontSize: 16.5, lineHeight: 1.6, color: "var(--sh-body)" }}>{f.a}</p>
      </div>
    </div>
  );
}
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: "calc(clamp(48px,7vw,88px) * var(--sh-dens,1)) 0", background: "var(--surface-soft)" }}>
      <Container width={1080}>
        <div className="sh-faq-grid" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 48, alignItems: "start" }}>
          <div className="sh-reveal">
            <Eyebrow icon="message-circle">Questions</Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: "clamp(28px,3.6vw,42px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.08, color: "var(--sh-ink)" }}>
              Good questions, honest answers
            </h2>
            <p style={{ margin: "16px 0 0", fontSize: 16.5, lineHeight: 1.6, color: "var(--sh-body)" }}>
              Still curious? <a href="contact.html" style={{ color: "var(--sh-honey-deep)", fontWeight: 600 }}>Send us a note</a> and we’ll reply like humans.
            </p>
          </div>
          <div className="sh-reveal">
            {FAQS.map((f, i) => <FAQItem key={f.q} f={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ================================================================= *
 * APP  (+ tweaks)
 * ================================================================= */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "honey",
  "density": "regular",
  "headline": "Grow brands people search for.",
  "ctaDark": true
}/*EDITMODE-END*/;

const ACCENTS = {
  honey:  { base: "#f2a104", active: "#d98a00", deep: "#b5740a", wash: "#fdf3df" },
  nectar: { base: "#e8590c", active: "#cf4f0a", deep: "#b8430a", wash: "#fdeee4" },
  bloom:  { base: "#a23ca6", active: "#8f3493", deep: "#7b2d8e", wash: "#f8eef8" },
  forest: { base: "#3f9d6b", active: "#2f855a", deep: "#1f6b4a", wash: "#e9f5ee" },
};

function applyAccent(key) {
  const a = ACCENTS[key] || ACCENTS.honey;
  const r = document.documentElement;
  r.style.setProperty("--sh-honey", a.base);
  r.style.setProperty("--sh-honey-active", a.active);
  r.style.setProperty("--sh-honey-deep", a.deep);
  r.style.setProperty("--sh-honey-wash", a.wash);
}

function splitHeadline(h) {
  // accent the last word
  const words = h.trim().split(" ");
  if (words.length < 2) return [h, "", ""];
  const last = words.pop();
  return [words.join(" ") + " ", last, ""];
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useScrollReveal();
  React.useEffect(() => { injectSharedCSS(); }, []);
  React.useEffect(() => { applyAccent(t.accent); }, [t.accent]);

  const dens = { compact: 0.8, regular: 1, comfy: 1.18 }[t.density] || 1;
  React.useEffect(() => { document.documentElement.style.setProperty("--sh-dens", dens); }, [dens]);

  return (
    <div style={{ "--sh-dens": dens }}>
      <Nav active="" />
      <Hero headline={splitHeadline(t.headline)} />
      <Marquee label="Trusted by brands across consumer, DTC & B2B" items={["Marigold & Oak", "Honeycomb Kitchen", "Stride Republic", "Northwind", "Cedar & Co", "Lumen Labs", "Harbor Goods", "Vela"]} />
      <Stats />
      <Services />
      <Approach />
      <Work />
      <Testimonials />
      <FAQ />
      <CTABand title={t.ctaDark ? "Let’s build your hive." : "Let’s make something worth finding."} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent" value={ACCENTS[t.accent].base}
          options={[ACCENTS.honey.base, ACCENTS.nectar.base, ACCENTS.bloom.base, ACCENTS.forest.base]}
          onChange={(v) => { const k = Object.keys(ACCENTS).find((key) => ACCENTS[key].base === v) || "honey"; setTweak("accent", k); }} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Hero copy" />
        <TweakText label="Headline" value={t.headline} onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Closing band" />
        <TweakToggle label="“Build your hive” copy" value={t.ctaDark} onChange={(v) => setTweak("ctaDark", v)} />
      </TweaksPanel>
    </div>
  );
}

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