// ============ Sections - brand-aware (reads COPY from window.COPY) ============

const Heading = ({ head, center }) => (
  <div className="sec-head" style={center ? { textAlign: "center", margin: "0 auto 56px" } : undefined}>
    {head.eyebrow && <div className="eyebrow sec-head__eyebrow">{head.eyebrow}</div>}
    <h2 className="display sec-head__title">
      {head.title.map((l, i) => <React.Fragment key={i}>{l}{i < head.title.length - 1 && <br/>}</React.Fragment>)}
    </h2>
    {head.lead && <p className="sec-head__lead">{head.lead}</p>}
  </div>
);

const Hero = ({ variant = 1 }) => {
  const c = window.COPY.hero;

  const Eyebrow = () => (
    <div className="hero__eyebrow">
      <span className="hero__eyebrow__dot"></span><span>{c.eyebrow}</span>
    </div>
  );
  const Title = () => (
    <h1 className="display hero__title">
      {c.title[0]}<br/><em>{c.title[1]}</em><br/>{c.title[2]}
    </h1>
  );
  const Ctas = () => (
    <div className="hero__ctas">
      <a className="btn btn--primary btn--lg" href={(window.COPY && window.COPY.appHref) || "app.html"}>{c.ctaPrimary} <Icon name="arrow-right" size={16}/></a>
      <a className="btn btn--ghost btn--lg" href="#examples">{c.ctaSecondary}</a>
    </div>
  );
  const Meta = () => (
    <div className="hero__meta">
      {c.meta.map((m, i) => <div key={i} className="hero__meta__item"><Icon name="check" size={15}/> {m.t}</div>)}
    </div>
  );

  // V1 - Split: copy left, compare right (default)
  if (variant === 1) {
    return (
      <section className="hero">
        <div className="container hero__grid">
          <div>
            <Eyebrow/>
            <Title/>
            <p className="lead hero__lead">{c.lead}</p>
            <Ctas/>
            <Meta/>
          </div>
          <div><Compare before={IMG.heroBefore} after={IMG.heroAfter}/></div>
        </div>
      </section>
    );
  }

  // V2 - Centered editorial: big headline, compare underneath full-width
  if (variant === 2) {
    return (
      <section className="hero" style={{ paddingTop: 96 }}>
        <div className="container" style={{ textAlign: "center" }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}><Eyebrow/></div>
          <h1 className="display hero__title" style={{ fontSize: "clamp(56px, 7.5vw, 112px)", maxWidth: "16ch", margin: "0 auto" }}>
            {c.title[0]} <em>{c.title[1]}</em> {c.title[2]}
          </h1>
          <p className="lead hero__lead" style={{ margin: "28px auto 0" }}>{c.lead}</p>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}><Ctas/></div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 24 }}><Meta/></div>
          <div style={{ marginTop: 64, maxWidth: 1040, margin: "64px auto 0" }}>
            <Compare before={IMG.heroBefore} after={IMG.heroAfter}/>
          </div>
        </div>
      </section>
    );
  }

  // V3 - Stacked cards: compare on the left edge, card-like copy on right
  return (
    <section className="hero">
      <div className="container hero__grid" style={{ gridTemplateColumns: "1fr 0.95fr" }}>
        <div><Compare before={IMG.heroBefore} after={IMG.heroAfter}/></div>
        <div>
          <Eyebrow/>
          <Title/>
          <p className="lead hero__lead">{c.lead}</p>
          <Ctas/>
          <Meta/>
        </div>
      </div>
    </section>
  );
};

const Trust = () => (
  <section className="section--tight">
    <div className="container">
      <div className="trust">
        {window.COPY.trust.map((t, i) => (
          <div className="trust__item" key={i}>
            <div className="trust__num">{t.num}</div>
            <div className="trust__lbl">{t.lbl}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Steps = () => (
  <section className="section" id="how">
    <div className="container">
      <Heading head={window.COPY.stepsHead}/>
      <div className="steps">
        {window.COPY.steps.map((s, i) => (
          <div className="step" key={i}>
            <div className="step__num">{s.no}</div>
            <div className="step__ill"><img src={s.img} alt=""/></div>
            <h3 className="step__title">{s.title}</h3>
            <p className="step__body">{s.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Gallery = () => (
  <section className="section" id="examples">
    <div className="container">
      <Heading head={window.COPY.galleryHead}/>
      <div className="gallery">
        {window.COPY.gallery.map((g, i) => (
          <div className="gcard" key={i}>
            <div className="gcard__pair">
              <div className="gcard__half"><span className="gcard__tag">Before</span><img src={g.before} alt=""/></div>
              <div className="gcard__half"><span className="gcard__tag gcard__tag--after">After</span><img src={g.after} alt=""/></div>
            </div>
            <div className="gcard__foot">
              <div className="gcard__foot__l">{g.name}</div>
              <div className="gcard__foot__r">{g.style}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Styles = () => (
  <section className="section" id="features">
    <div className="container">
      <Heading head={window.COPY.stylesHead}/>
      <div className="styles-grid">
        {window.COPY.styles.map((s, i) => (
          <div className="style-card" key={i}>
            <img src={s.img} alt={s.name}/>
            <div className="style-card__shade"></div>
            <div className="style-card__label">{s.name}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Features = () => (
  <section className="section">
    <div className="container">
      <Heading head={window.COPY.featuresHead}/>
      <div className="features">
        {window.COPY.features.map((f, i) => (
          <div className="feature" key={i}>
            <div className="feature__icon"><Icon name={f.icon} size={22}/></div>
            <h3 className="feature__title">{f.title}</h3>
            <p className="feature__body">{f.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const LogoStrip = () => (
  <section className="section--tight">
    <div className="container">
      <div className="eyebrow" style={{ textAlign: "center", marginBottom: 20 }}>{window.COPY.logosHead}</div>
      <div className="logostrip">
        {window.COPY.logos.map((n, i) => (
          <div key={i} className={i % 2 ? "logostrip__logo logostrip__logo--mono" : "logostrip__logo"}>{n}</div>
        ))}
      </div>
    </div>
  </section>
);

const Testimonials = () => (
  <section className="section">
    <div className="container">
      <Heading head={window.COPY.testimonialsHead}/>
      <div className="testimonials">
        {window.COPY.testimonials.map((t, i) => (
          <div className="tcard" key={i}>
            <div className="tcard__stars">
              {Array.from({ length: t.stars }).map((_, j) => <Icon key={j} name="star" size={14}/>)}
            </div>
            <div className="tcard__quote">"{t.quote}"</div>
            <div className="tcard__author">
              <div className="tcard__avatar">{t.initial}</div>
              <div>
                <div className="tcard__name">{t.name}</div>
                <div className="tcard__role">{t.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section className="section" id="pricing">
    <div className="container">
      <Heading head={window.COPY.pricingHead}/>
      <div className="pricing">
        {window.COPY.plans.map((p, i) => (
          <div className={`plan ${p.featured ? "plan--featured" : ""}`} key={i}>
            {p.featured && <div className="plan__badge">{p.tag}</div>}
            <div className="plan__name">{p.name}</div>
            <div className="plan__tag">{p.tag}</div>
            <div className="plan__price">{p.price}</div>
            <div className="plan__per">{p.per}</div>
            <ul className="plan__feats">
              {p.feats.map((f, j) => <li className="plan__feat" key={j}><Icon name="check" size={14}/> {f}</li>)}
            </ul>
            <div className="plan__cta">
              <a href={(window.COPY && window.COPY.appHref) || "app.html"} className={p.featured ? "btn btn--primary" : "btn btn--ghost"}>{p.cta}</a>
            </div>
          </div>
        ))}
      </div>
      <p style={{ textAlign: "center", marginTop: 32, fontSize: 13, color: "var(--c-ink-3)" }}>{window.COPY.pricingFoot}</p>
    </div>
  </section>
);

const Faq = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <Heading head={window.COPY.faqHead} center/>
        <div className="faq">
          {window.COPY.faqs.map((f, i) => (
            <FaqItem key={i} {...f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const CtaBlock = () => {
  const c = window.COPY.ctaHead;
  return (
    <section className="section--tight">
      <div className="container">
        <div className="cta-block">
          <div className="cta-block__bg"></div>
          <h2 className="cta-block__title">
            {c.title.map((l, i) => <React.Fragment key={i}>{l}{i < c.title.length - 1 && <br/>}</React.Fragment>)}
          </h2>
          <p className="cta-block__lead">{c.lead}</p>
          <a href={(window.COPY && window.COPY.appHref) || "app.html"} className="btn btn--primary btn--lg">{c.cta} <Icon name="arrow-right" size={16}/></a>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const f = window.COPY.footer;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <div className="footer__brand__name">{window.COPY.brandName}</div>
            <div className="footer__brand__desc">{f.blurb}</div>
          </div>
          {f.cols.map((c, i) => (
            <div className="footer__col" key={i}>
              <h4>{c.h}</h4>
              <ul>{c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <div>© 2026 {window.COPY.brandName}. All rights reserved.</div>
          <div>{f.tagline}</div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Hero, Trust, Steps, Gallery, Styles, Features, LogoStrip, Testimonials, Pricing, Faq, CtaBlock, Footer, Heading });