// sections.jsx — less is more

const { useEffect, useRef, useState } = React;

function useReveal() {
  useEffect(() => {}, []);
}

// ─────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav" data-screen-label="Nav">
      <div className="container nav-inner">
        <a className="logo" href="#top" aria-label="GalalsMarketing home">
          <span>Galals<span style={{fontStyle:"italic", color:"var(--muted)"}}>Marketing</span><span style={{color:"var(--accent)"}}>.</span></span>
        </a>
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#pricing">Pricing</a>
          <a href="#process">Process</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="nav-cta">Start a project →</a>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero-quiet" id="top" data-screen-label="01 Hero">
      <div className="container">
        <span className="mono" style={{color:"var(--muted)"}}>GalalsMarketing — Bakersfield, California</span>
        <h1 className="display-quiet">
          Less,<br/>
          <span className="it">said better.</span>
        </h1>
        <div className="hero-foot">
          <p className="hero-lede-quiet">
            A small studio for brands that want to be heard — not louder, just clearer.
          </p>
          <a href="#pricing" className="arrow-link">
            See pricing
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 11 L11 3 M11 3 L5 3 M11 3 L11 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
function Services() {
  const items = [
    { n: "01", title: "Strategy", line: "What you stand for, in one sentence." },
    { n: "02", title: "Identity", line: "Logo, type, color — the look that lasts." },
    { n: "03", title: "Digital",  line: "Sites and content that work, quietly." },
    { n: "04", title: "Social",   line: "Daily presence, fully managed." },
  ];
  return (
    <section className="section-quiet" id="services" data-screen-label="02 Services">
      <div className="container">
        <span className="section-num">§ 01 — Services</span>
        <ul className="srv-list">
          {items.map(s => (
            <li className="srv-row" key={s.n}>
              <span className="srv-n">{s.n}</span>
              <span className="srv-t">{s.title}</span>
              <span className="srv-l">{s.line}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
function Pricing() {
  return (
    <section className="section-quiet" id="pricing" data-screen-label="03 Pricing">
      <div className="container">
        <div className="pricing-head">
          <span className="section-num">§ 02 — Pricing</span>
          <h2 className="section-title-quiet">
            Three plans.<br/><span className="it">No fine print.</span>
          </h2>
        </div>

        <div className="pricing-grid">
          {window.PRICING.map((p, i) => <PriceCard key={p.id} plan={p} index={i} />)}
        </div>

        <p className="pricing-foot">
          All plans fully managed. Month-to-month. Short-form video — Pro only.
        </p>
      </div>
    </section>
  );
}

function PriceCard({ plan, index }) {
  const [loading, setLoading] = useState(false);

  async function handleCheckout() {
    setLoading(true);
    try {
      const res = await fetch("/api/create-checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ priceId: plan.priceId }),
      });
      const data = await res.json();
      if (data.url) {
        window.location.href = data.url;
      } else {
        alert("Something went wrong. Please try again.");
        setLoading(false);
      }
    } catch {
      alert("Something went wrong. Please try again.");
      setLoading(false);
    }
  }

  return (
    <div className={`price-card ${plan.featured ? "featured" : ""}`}>
      {plan.badge && <span className="price-badge">{plan.badge}</span>}
      <div className="price-head">
        <h3 className="price-name">{plan.name}</h3>
        <div className="price-amount">
          <span className="currency">$</span>
          <span className="num">{plan.price}</span>
          <span className="cad">{plan.cadence}</span>
        </div>
        <p className="price-tagline">{plan.tagline}</p>
      </div>

      <div className="price-rule"></div>

      <div className="price-volume">
        <div className="v">{plan.posts.split(" / ")[0]} <span className="it">/ {plan.posts.split(" / ")[1]}</span></div>
        <div className="k">{plan.platforms.join(" · ")}</div>
      </div>

      <ul className="price-features">
        {plan.features.map((f, i) => (
          <li key={i} className={`price-feature ${f.on ? "" : "off"} ${f.accent ? "accent" : ""}`}>
            <span className="check" aria-hidden="true">
              {f.on ? (
                <svg width="9" height="9" viewBox="0 0 10 10" fill="none">
                  <path d="M2 5 L4.5 7.5 L8 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" fill="none"/>
                </svg>
              ) : (
                <svg width="9" height="9" viewBox="0 0 10 10" fill="none">
                  <path d="M3 3 L7 7 M7 3 L3 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
                </svg>
              )}
            </span>
            <span>{f.label}</span>
          </li>
        ))}
      </ul>

      <button onClick={handleCheckout} disabled={loading} className="price-cta">
        {loading ? "Loading…" : plan.cta}
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
function Process() {
  const steps = [
    { n: "01", name: "Listen" },
    { n: "02", name: "Plan" },
    { n: "03", name: "Make" },
    { n: "04", name: "Ship" },
  ];
  return (
    <section className="section-quiet" id="process" data-screen-label="04 Process">
      <div className="container">
        <span className="section-num">§ 03 — Process</span>
        <h2 className="section-title-quiet">
          Four steps.<br/><span className="it">Two to four months.</span>
        </h2>
        <ol className="proc-line">
          {steps.map((s, i) => (
            <li key={s.n} className="proc-step">
              <span className="proc-n">{s.n}</span>
              <span className="proc-name">{s.name}</span>
              {i < steps.length - 1 && <span className="proc-dash" aria-hidden="true">—</span>}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
function Contact() {
  return (
    <section className="contact-quiet" id="contact" data-screen-label="05 Contact">
      <div className="container">
        <span className="section-num">§ 04 — Contact</span>
        <h2 className="contact-headline-quiet">
          Let's <span className="it">talk.</span>
        </h2>
        <a href="mailto:galaljobah@gmail.com" className="contact-email">
          galaljobah@gmail.com
        </a>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="container">
      <div className="footer">
        <span>© MMXXVI GalalsMarketing</span>
        <span>Bakersfield, California</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  useReveal, Nav, Hero, Services, Pricing, Process, Contact, Footer
});