// Managed.jsx — S5: Before We Meet — the pre-meeting homepage concept
function Managed() {
  const concept = [
    { t: "A first homepage design", d: "A real first-screen direction for your homepage, built around your business, offer, proof, and next step." },
    { t: "A clearer homepage message", d: "Plain-language copy direction for what the page should say first, so visitors understand the business faster." },
    { t: "A site strategy", d: "A practical plan for what the rest of the site should include: pages, sections, proof, services, FAQs, and conversion paths." },
    { t: "A proof plan", d: "Where reviews, testimonials, project photos, logos, before/afters, and credibility signals should show up." },
    { t: "A build recommendation", d: "A clear starting scope, timeline, and path to launch if you want to move forward." },
  ];
  const secRef = useReveal();
  return (
    <section ref={secRef} id="control" className="section control-sec">
      <div className="haze-bloom" style={{ opacity: 0.16 }} />
      <div className="control-streaks" aria-hidden="true" />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 56, alignItems: "start" }} className="control-grid">
          {/* left — message */}
          <div className="control-left">
            <div className="eyebrow"><span className="dot" />Before we meet</div>
            <h2 className="h-section" style={{ maxWidth: 500 }}>See the first page before the first call.</h2>
            <p className="p-lead" style={{ maxWidth: 490 }}>
              Most website projects start with a sales call and a rough estimate. Siteworks starts by designing the first version of your homepage before we meet.
            </p>
            <p className="p-lead" style={{ maxWidth: 490, marginTop: 16 }}>
              You get something real to react to, plus a clear strategy for what the rest of the site should become.
            </p>
            <div className="callout" style={{ marginTop: 30, maxWidth: 490 }}>
              <i className="ri-compass-3-line" />
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "var(--fg1)" }}>You are not asking for a quote in the dark.</div>
                <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.55, color: "var(--fg2)", margin: "6px 0 0" }}>
                  You will see the homepage direction, the site strategy, and the clearest path to launch before deciding what comes next.
                </p>
              </div>
            </div>
            <div className="hero-cta-row" style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
              <a href="#cta" className="btn btn-primary">Get my first-page design <i className="ri-arrow-right-line" /></a>
              <a href="#review" className="btn btn-secondary">See pricing</a>
            </div>
            <div className="control-micro">
              <i className="ri-time-line" />Designs can be prepared within 24 hours after you schedule a call.
            </div>
          </div>

          {/* right — what your concept includes */}
          <div className="glass glass--featured concept-panel control-right" style={{ padding: 28 }}>
            <span className="card-beam" aria-hidden="true" />
            <div className="peek-head" style={{ marginBottom: 18 }}>
              <span className="peek-title"><i className="ri-file-list-3-line" />What you get before the call</span>
              <span className="pay-badge pay-badge--violet"><span className="pay-badge-dot" />Before we meet</span>
            </div>
            <div className="concept-list">
              {concept.map((c, idx) => (
                <div className="concept-item" key={c.t}>
                  <span className="concept-num">{idx + 1}</span>
                  <div>
                    <div className="concept-t">{c.t}</div>
                    <p className="concept-d">{c.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Managed });