// services.jsx — Services, Process, About, Contact, Footer.

function ServicesSection({ accent }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="services" id="services">
      <div className="sec-head">
        <span className="sec-label">
          <span className="sec-label-num">§ 02</span>
          <span>What we do</span>
        </span>
        <h2 className="sec-h">
          Four suits.<br />One team.
        </h2>
        <p className="sec-sub">
          We don't sub out the interesting parts. Strategy, creative, production, and post — all under one roof, all pointed at your mission.
        </p>
      </div>

      <ul className="svc-list">
        {SERVICES.map((s, i) =>
        <li
          key={s.num}
          className="svc-item"
          data-open={open === i ? "1" : "0"}
          onClick={() => setOpen(i)}>
          
            <div className="svc-row">
              <span className="svc-num">{s.num}</span>
              <h3 className="svc-title">{s.title}</h3>
              <span className="svc-toggle" aria-hidden="true">
                {open === i ? "—" : "+"}
              </span>
            </div>
            <div className="svc-body">
              <div className="svc-body-inner">
                <p>{s.body}</p>
                <ul className="svc-delivs">
                  {s.deliverables.map((d) =>
                <li key={d}>
                      <span className="svc-deliv-dot" />
                      {d}
                    </li>
                )}
                </ul>
              </div>
            </div>
          </li>
        )}
      </ul>
    </section>);

}

function ProcessSection() {
  return (
    <section className="process">
      <div className="proc-grid">
        <div className="proc-head">
          <span className="sec-label">
            <span className="sec-label-num">§ 03</span>
            <span>How we work</span>
          </span>
          <h2 className="sec-h">
            How We<br />Suit Up.
          </h2>
          <p className="sec-sub">
            One team. No middlemen. Just the people making the work, working directly with you.
          </p>
        </div>
        <ol className="proc-steps">
          {PROCESS.map((p) =>
          <li key={p.step} className="proc-step">
              <span className="proc-step-num">{p.step}</span>
              <div>
                <h4 className="proc-step-h">{p.name}</h4>
                <p className="proc-step-b">{p.body}</p>
              </div>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

function StudioSection() {
  return (
    <section className="studio" id="studio">
      <div className="sec-head">
        <span className="sec-label">
          <span className="sec-label-num">§ 04</span>
          <span>The studio</span>
        </span>
        <h2 className="sec-h">
          A full suit, not the<br />entire<br />deck of cards
        </h2>
      </div>

      <div className="studio-grid">
        <div className="studio-copy">
          <p className="studio-p">
            {STUDIO.about}
          </p>
          <p className="studio-p">We keep the team small on purpose. A director, a producer, an editor, a strategist — plus a trusted bench of collaborators we've worked with for years. You get senior hands on every task, and the person who pitched the work is the person who finishes it.

          </p>
          <dl className="studio-stats">
            <div><dt>Based</dt><dd>{STUDIO.location}</dd></div>
            <div><dt>Founded</dt><dd>{STUDIO.founded}</dd></div>
            <div><dt>Clients</dt><dd>{STUDIO.clientCount}</dd></div>
            <div><dt>Headcount</dt><dd>2 FULL-TIME</dd></div>
          </dl>
        </div>
        <div className="studio-media">
          <Placeholder
            label="studio · brooklyn"
            ratio="4/5"
            tint="oklch(0.58 0.08 55)"
            bg="oklch(0.93 0.02 70)" />
          
          <div className="studio-media-caption">
            <span>Fig. 01</span>
            <span>— The studio, 108 Plymouth St, Brooklyn.</span>
          </div>
        </div>
      </div>

    </section>);

}

function RetainerBanner() {
  return (
    <section className="retainer-banner">
      <div className="retainer-banner-inner">
        <div className="retainer-banner-copy">
          <span className="retainer-banner-eyebrow">Retainers</span>
          <h2 className="retainer-banner-h">Looking for an ongoing creative partner?</h2>
          <p className="retainer-banner-sub">
            Some missions need more than one project. Our retainer plans give you a dedicated team, consistent content, and a partner who's in it for the long haul.
          </p>
        </div>
        <a href="retainers.html" className="retainer-banner-cta">
          <span>Explore Retainers</span>
          <span className="retainer-banner-arrow" aria-hidden="true">→</span>
        </a>
      </div>
    </section>);

}

function ContactSection() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [budget, setBudget] = React.useState("");
  const [kinds, setKinds] = React.useState([]);

  const toggle = (k) =>
  setKinds((xs) => xs.includes(k) ? xs.filter((x) => x !== k) : [...xs, k]);

  const valid = name.trim() && /\S+@\S+\.\S+/.test(email) && msg.trim().length > 6;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setSent(true);
  };

  return (
    <section className="contact" id="contact">
      <div className="contact-inner">
        <div className="contact-head">
          <span className="sec-label sec-label-light">
            <span className="sec-label-num">§ 05</span>
            <span>Start a project</span>
          </span>
          <h2 className="contact-h">
            Tell us what<br />you're making.
          </h2>
          <p className="contact-sub">
            A few sentences is enough. We reply to every note within two working days, with a real person's name at the bottom.
          </p>
          <div className="contact-direct">
            <a href={`mailto:${STUDIO.email}`} className="contact-direct-a">
              <span className="contact-direct-k">Email</span>
              <span className="contact-direct-v">{STUDIO.email}</span>
            </a>
            <div className="contact-direct-a">
              <span className="contact-direct-k">Phone</span>
              <span className="contact-direct-v">{STUDIO.phone}</span>
            </div>
            <div className="contact-direct-a">
              <span className="contact-direct-k"></span>
              <span className="contact-direct-v"></span>
            </div>
          </div>
        </div>

        <form className="contact-form" onSubmit={submit}>
          {sent ?
          <div className="contact-sent">
              <div className="contact-sent-mark">✓</div>
              <h3>Got it, {name.split(" ")[0] || "friend"}.</h3>
              <p>We'll reply by Thursday at the latest — usually sooner. In the meantime, <a href="#work">browse the work</a>.</p>
            </div> :

          <>
              <label className="cf-f">
                <span className="cf-l">01 · Your name</span>
                <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Jane Doe" />
              
              </label>
              <label className="cf-f">
                <span className="cf-l">02 · Email</span>
                <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="jane@company.com" />
              
              </label>
              <div className="cf-f">
                <span className="cf-l">03 · What are you making?</span>
                <div className="cf-chips">
                  {["Brand Film", "Campaign", "Identity", "Digital", "Not sure yet"].map((k) =>
                <button
                  type="button"
                  key={k}
                  className="cf-chip"
                  data-on={kinds.includes(k) ? "1" : "0"}
                  onClick={() => toggle(k)}>
                  
                      {k}
                    </button>
                )}
                </div>
              </div>
              <div className="cf-f">
                <span className="cf-l">04 · Budget</span>
                <div className="cf-chips">
                  {["< $5k", "$5-10k", "$10-25k", "$25k+", "Tell me"].map((b) =>
                <button
                  type="button"
                  key={b}
                  className="cf-chip"
                  data-on={budget === b ? "1" : "0"}
                  onClick={() => setBudget(b)}>
                  
                      {b}
                    </button>
                )}
                </div>
              </div>
              <label className="cf-f">
                <span className="cf-l">05 · A few sentences</span>
                <textarea
                value={msg}
                rows={4}
                onChange={(e) => setMsg(e.target.value)}
                placeholder="We're launching in September and…" />
              
              </label>
              <button type="submit" className="cf-submit" data-valid={valid ? "1" : "0"}>
                <span>Send it</span>
                <span aria-hidden="true" className="cf-submit-arrow">→</span>
              </button>
            </>
          }
        </form>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="foot">
      <div className="foot-mark">
        <span className="foot-mark-word">Full</span>
        <span className="foot-mark-word">Suit</span>
        <span className="foot-mark-word">Media</span>
      </div>
      <div className="foot-grid">
        <div>
          <span className="foot-k">BASED</span>
          <span className="foot-v">Birmingham, Alabama</span>
        </div>
        <div>
          <span className="foot-k">Contact</span>
          <a href={`mailto:${STUDIO.email}`} className="foot-v">{STUDIO.email}</a>
          <span className="foot-v">{STUDIO.phone}</span>
        </div>
        <div>
          <span className="foot-k">The Four Suits</span>
          {SUITS.map((s) =>
          <a key={s.slug} href={`suit-${s.slug}.html`} className="foot-v">{s.name}</a>
          )}
        </div>
      </div>
      <SocialRow />
      <div className="foot-bottom">
        <span>© {new Date().getFullYear()} Full Suit Media, LLC</span>
        <span>Designed &amp; built in-house</span>
        <span>Site v4.0</span>
      </div>
    </footer>);

}

function SocialRow() {
  const socials = [
  ["Instagram", "https://www.instagram.com/fullsuitmedia/", <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></svg>],
  ["Facebook", "https://www.facebook.com/share/1HKHKL4yAG/?mibextid=wwXIfr", <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>],
  ["LinkedIn", "https://www.linkedin.com/in/will-tidwell-99b40324a/", <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></svg>]];

  return (
    <div className="foot-social">
      {socials.map(([label, href, icon]) =>
      <a key={label} href={href} className="foot-social-a" aria-label={label} target="_blank" rel="noopener">
          {icon}
        </a>
      )}
    </div>);

}

function Marquee() {
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {[...CLIENTS, ...CLIENTS].map((c, i) =>
        <span key={i} className="marquee-item">
            <span>{c}</span>
            <span className="marquee-dot">✦</span>
          </span>
        )}
      </div>
    </div>);

}

Object.assign(window, { ServicesSection, ProcessSection, RetainerBanner, StudioSection, ContactSection, Footer, SocialRow, Marquee });