/* global React */
/* EgoYüzme · Shared components — Hero, TrustStrip, FAQ, EnrollmentCTA, CtaBand, AgeFilter, BranchSelector */

const HERO_SLIDES = [
  { key: "kids",  image: () => window.__resources.photoPoolKids },
  { key: "pool",  image: () => window.__resources.photoPool },
];

const Hero = ({ onPrimary, onSecondary }) => {
  const [idx, setIdx] = React.useState(0);
  const total = HERO_SLIDES.length;

  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % total), 6000);
    return () => clearInterval(t);
  }, [total]);

  return (
    <section className="hero">
      {HERO_SLIDES.map((s, i) => (
        <div
          key={s.key}
          className={`photo${i === idx ? " is-active" : ""}`}
          style={{ backgroundImage: `url(${s.image()})` }}
          aria-hidden={i === idx ? "false" : "true"}
        />
      ))}
      <div className="protection" />
      <img
        className="turtle-bg"
        src="assets/logos/turtle-mark-white.png"
        alt=""
        aria-hidden="true"
      />
      <div className="container">
        <div className="inner">
          <Eyebrow color="#BDE6F0">EGO Sport Maltepe Yüzme Akademisi</Eyebrow>
          <h1 className="mt-4" style={{ textWrap: "balance" }}>
            Yüzme, yaşam tarzının bir parçası.
          </h1>
          <p className="lead">
            Yüzme eğitimi konusunda uzmanlaşmış kuruluş. Yılların verdiği deneyim ve uzman kadromuzla,
            öğrencilerin suyla arasındaki bağı en iyi şekilde oluşturmalarına yardımcı olmak için çaba gösteririz.
          </p>
          <div className="cta-row">
            <Button variant="accent" size="lg" onClick={onPrimary} rightIcon="arrow-right">
              Ücretsiz deneme dersi al
            </Button>
            <Button variant="secondary--on-blue" size="lg" onClick={onSecondary}>
              Programları keşfet
            </Button>
          </div>
        </div>
      </div>
      <div className="hero-dots" role="tablist" aria-label="Banner navigasyonu">
        {HERO_SLIDES.map((s, i) => (
          <button
            key={s.key}
            type="button"
            className={`hero-dot${i === idx ? " is-active" : ""}`}
            aria-label={`Slayt ${i + 1}`}
            aria-pressed={i === idx}
            onClick={() => setIdx(i)}
          />
        ))}
      </div>
    </section>
  );
};

const TrustStrip = () => (
  <div className="container">
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div className="trust-strip">
        <div className="item">
          <div className="stat">360°</div>
          <div className="lbl">Canlı video analiz</div>
        </div>
        <div className="item">
          <div className="stat">TYF</div>
          <div className="lbl">Lisanslı sporcu yetiştirme</div>
        </div>
        <div className="item">
          <div className="stat">4</div>
          <div className="lbl">Yüzme stili (serbest, sırt, kurbağa, kelebek)</div>
        </div>
        <div className="item">
          <div className="stat">3+</div>
          <div className="lbl">Yaş, her seviyeye</div>
        </div>
      </div>
    </div>
  </div>
);

const FAQItem = ({ q, a, open, onToggle }) => (
  <div className="faq-row" data-open={open ? "true" : "false"}>
    <button className="q" type="button" onClick={onToggle} aria-expanded={open}>
      <span className="ic">{open ? "−" : "+"}</span>
      <span style={{ flex: 1 }}>{q}</span>
    </button>
    {open ? <div className="a">{a}</div> : null}
  </div>
);

const FAQ = ({ items = FAQ_DATA, initialOpen = 0 }) => {
  const [open, setOpen] = React.useState(initialOpen);
  return (
    <div className="faq-list">
      {items.map((it, i) => (
        <FAQItem key={i} q={it.q} a={it.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
      ))}
    </div>
  );
};

const AgeFilter = ({ value, onChange }) => {
  const options = [
    { id: "3-6", label: "3–6" },
    { id: "7-12", label: "7–12" },
    { id: "13+", label: "13+" },
    { id: "adult", label: "Yetişkin" },
  ];
  return (
    <div className="seg" role="tablist" aria-label="Yaş grubu">
      {options.map(o => (
        <button
          key={o.id}
          type="button"
          aria-pressed={value === o.id}
          onClick={() => onChange(o.id)}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
};

const BranchSelector = ({ value, onChange }) => (
  <div className="branch-pills">
    {BRANCHES.map(b => (
      <button
        key={b.id}
        type="button"
        className="branch-pill"
        aria-pressed={value === b.id}
        onClick={() => onChange(b.id)}
      >
        <span className="pin" />
        {b.name}
      </button>
    ))}
  </div>
);

const ProgramCard = ({ p }) => (
  <article className={`card${p.feature ? " card--feature" : ""}`}>
    <Eyebrow color={p.feature ? "#FDEBCC" : p.color}>{p.eyebrow}</Eyebrow>
    <h3 className="mt-2">{p.title}</h3>
    <p>{p.short}</p>
    <div className="flex gap-2" style={{ flexWrap: "wrap" }}>
      {p.chips.map(c => (
        <Chip key={c} variant={p.feature ? "outline" : "outline"}>{c}</Chip>
      ))}
    </div>
    <a className="more" href="#/programlar" onClick={(e) => {
      // Allow normal anchor, but scroll to section after route changes
      setTimeout(() => {
        const el = document.getElementById("prog-" + p.id);
        if (el) {
          const top = el.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top, behavior: "smooth" });
        }
      }, 120);
    }}>Programı keşfet</a>
  </article>
);

const ProgramGrid = ({ programs = PROGRAMS }) => (
  <div className="program-grid">
    {programs.map(p => <ProgramCard key={p.id} p={p} />)}
  </div>
);

const EnrollmentCTA = ({ onSubmit, defaultBranch = "maltepe" }) => {
  const [age, setAge] = React.useState("7-12");
  const [branch, setBranch] = React.useState(defaultBranch);
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    cName: "", pName: "", phone: "", email: "", note: "", kvkk: false,
  });
  const [errors, setErrors] = React.useState({});

  const upd = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm(f => ({ ...f, [k]: v }));
    setErrors(er => ({ ...er, [k]: undefined }));
  };

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.cName.trim()) er.cName = "Lütfen adı girin.";
    if (!form.pName.trim()) er.pName = "Veli adı gerekli.";
    if (!form.phone.trim()) er.phone = "Telefon gerekli.";
    if (!form.kvkk) er.kvkk = "KVKK metnini onaylayın.";
    setErrors(er);
    if (Object.keys(er).length) return;
    setSubmitted(true);
    onSubmit && onSubmit({ ...form, age, branch });
  };

  if (submitted) {
    return (
      <div className="enroll text-center">
        <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--color-success-bg)", color: "var(--color-success)", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto" }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <h2 className="mt-4">Talebiniz bize ulaştı.</h2>
        <p className="mt-2" style={{ color: "var(--fg-muted)", maxWidth: 480, margin: "8px auto 0" }}>
          24 saat içinde eğitmen koordinatörümüz sizi arayacak ve {BRANCHES.find(b => b.id === branch)?.name} şubesi için uygun deneme dersi saatini ayarlayacak.
        </p>
        <Button variant="ghost" style={{ marginTop: 24 }} onClick={() => {
          setSubmitted(false);
          setForm({ cName: "", pName: "", phone: "", email: "", note: "", kvkk: false });
        }}>Yeni form gönder</Button>
      </div>
    );
  }

  return (
    <form className="enroll" onSubmit={submit} noValidate>
      <Eyebrow>Kayıt</Eyebrow>
      <h2 className="mt-2">Yüzme öğrenmek isteyen herkese eğitim veririz.</h2>
      <p style={{ color: "var(--fg-muted)" }}>Her seviyeden öğrenciyi kabul ederiz. Çocuğunuza özel bir yüzme programı hazırlarız.</p>

      <div className="grid mt-6">
        <Field label="Çocuğunuzun adı" error={errors.cName}>
          <input
            className="input"
            value={form.cName}
            onChange={upd("cName")}
            placeholder="Ör: Defne"
            autoComplete="given-name"
          />
        </Field>
        <Field label="Veli adı soyadı" error={errors.pName}>
          <input
            className="input"
            value={form.pName}
            onChange={upd("pName")}
            placeholder="Ör: Elif Yılmaz"
            autoComplete="name"
          />
        </Field>
        <Field label="Telefon" hint="Sadece WhatsApp doğrulaması için." error={errors.phone}>
          <input
            className="input"
            type="tel"
            inputMode="tel"
            value={form.phone}
            onChange={upd("phone")}
            placeholder="0 5XX XXX XX XX"
            autoComplete="tel"
          />
        </Field>
        <Field label="E-posta (opsiyonel)">
          <input
            className="input"
            type="email"
            inputMode="email"
            value={form.email}
            onChange={upd("email")}
            placeholder="ornek@eposta.com"
            autoComplete="email"
          />
        </Field>

        <div className="field">
          <label>Yaş grubu</label>
          <AgeFilter value={age} onChange={setAge} />
        </div>
        <div className="field">
          <label>Tercih edilen şube</label>
          <select className="input" value={branch} onChange={e => setBranch(e.target.value)}>
            {BRANCHES.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
          </select>
        </div>
        <div className="field" style={{ gridColumn: "1 / -1" }}>
          <label>Not (opsiyonel)</label>
          <textarea className="input" rows={2} value={form.note} onChange={upd("note")} placeholder="Ör: Su korkusu var, sakinleştirici bir başlangıç olsun."></textarea>
        </div>
      </div>

      <div className="flex gap-4 items-center mt-8" style={{ justifyContent: "space-between", flexWrap: "wrap" }}>
        <label style={{ fontSize: "var(--fs-13)", color: "var(--fg-subtle)", display: "inline-flex", gap: 8, alignItems: "center", cursor: "pointer" }}>
          <input type="checkbox" checked={form.kvkk} onChange={upd("kvkk")} />
          <span>KVKK metnini okudum ve onaylıyorum.</span>
          {errors.kvkk ? <span style={{ color: "var(--color-danger)", marginLeft: 6 }}>· {errors.kvkk}</span> : null}
        </label>
        <Button variant="primary" size="lg" type="submit" rightIcon="arrow-right" glow>
          Deneme dersi talep et
        </Button>
      </div>
    </form>
  );
};

const CtaBand = ({ title = "Yüzme öğrenmek isteyen herkese eğitim veririz.", lead = "Her seviyeden öğrenciyi kabul ederiz. Kayıt işlemleri web sitesinden veya telefonla yapılabilmektedir.", primaryLabel = "İletişime geçin" }) => (
  <section className="cta-band">
    <img className="turtle-bg" src="assets/logos/turtle-mark-white.png" alt="" aria-hidden="true" />
    <div className="container">
      <div className="row">
        <div className="text">
          <Eyebrow color="#BDE6F0">Kayıt</Eyebrow>
          <h2 className="mt-2">{title}</h2>
          <p className="mt-2">{lead}</p>
        </div>
        <div className="cta-row" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Button variant="accent" size="lg" rightIcon="arrow-right" onClick={() => window.location.hash = "/iletisim"}>{primaryLabel}</Button>
          <Button variant="secondary--on-blue" size="lg" leftIcon="message-circle" onClick={() => window.open("https://wa.me/905551234567", "_blank")}>
            WhatsApp'tan yaz
          </Button>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, TrustStrip, FAQ, FAQItem, AgeFilter, BranchSelector, ProgramGrid, ProgramCard, EnrollmentCTA, CtaBand });