// === Airchip — home page (index.html) ===
// Shared layout primitives come from shared.jsx via window globals.
const { useState, useEffect } = React;
const { Nav, Footer, RichHeading, useReveal, joinHeading, applyAppearance } = window;

function Hero({ t, accent, variant }) {
  return (
    <section className="hero" id="top" data-accent={accent} data-variant={variant}>
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow reveal">{t.hero.eyebrow}</div>
            <h1 className="reveal">{joinHeading(t.hero.h1)}</h1>
            <p className="lede reveal">{t.hero.lede}</p>
            <div className="hero-ctas reveal">
              <a href="#contact" className="btn primary">
                {t.hero.primary} <Icon.Arrow className="arrow" />
              </a>
              <a href="#services" className="btn ghost">
                {t.hero.secondary}
              </a>
            </div>
          </div>

          {variant !== "minimal" && (
            <div className="hero-visual reveal">
              <div className="ring" />
              <div className="logo-big">
                <img src="assets/airchip-mark-hires.png" alt="" />
              </div>
              {t.hero.tags.map((tag, i) => (
                <div key={i} className={`tag t${i+1}`}>{tag}</div>
              ))}
            </div>
          )}
        </div>

        <div className="hero-stats reveal">
          {t.hero.stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="num">{s.num}<span className="unit">{s.unit}</span></div>
              <div className="lbl">{s.lbl}</div>
            </div>
          ))}
        </div>
      </div>

      {variant === "marquee" && (
        <div className="marquee-strip">
          <div className="marquee-track">
            {[...t.marquee, ...t.marquee].map((m, i) => <span key={i}>{m}</span>)}
          </div>
        </div>
      )}
    </section>
  );
}

function Services({ t }) {
  const icons = [Icon.Chip, Icon.Code, Icon.Device];
  return (
    <section className="services" id="services">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">{t.services.eyebrow}</div>
            <RichHeading parts={t.services.h2} tag="h2" />
          </div>
          <p className="h2-lede">{t.services.lede}</p>
        </div>

        <div className="svc-grid reveal">
          {t.services.cards.map((c, i) => {
            const IconC = icons[i];
            return (
              <div className="svc-card" key={i}>
                <span className="num">{c.num}</span>
                <div className="icon"><IconC /></div>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <ul>
                  {c.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
                <a href="#contact" className="more">
                  {t.services.more} <Icon.Arrow className="arrow" />
                </a>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section id="process">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">{t.process.eyebrow}</div>
            <RichHeading parts={t.process.h2} tag="h2" />
          </div>
          <p className="h2-lede">{t.process.lede}</p>
        </div>
        <div className="process-steps">
          {t.process.steps.map((s, i) => (
            <div className="step reveal" key={i}>
              <div className="step-num">— {s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudy({ t }) {
  return (
    <section id="work">
      <div className="wrap case reveal">
        <div className="case-art">
          <div className="stamp">{t.case.stamp}</div>
        </div>
        <div>
          <div className="eyebrow">{t.case.eyebrow}</div>
          <RichHeading parts={t.case.h2} tag="h3" />
          <p>{t.case.desc}</p>
          <div className="case-meta">
            {t.case.meta.map((m, i) => (
              <div key={i}>
                <div className="k">{m.k}</div>
                <div className="v">{m.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Tech({ t }) {
  return (
    <section className="tech" id="tech">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">{t.tech.eyebrow}</div>
            <RichHeading parts={t.tech.h2} tag="h2" />
          </div>
          <p className="h2-lede">{t.tech.lede}</p>
        </div>
        <div className="tech-cats">
          {t.tech.cats.map((c, i) => (
            <div className="tech-cat reveal" key={i}>
              <h5>{c.name}</h5>
              <div className="tech-chips">
                {c.chips.map((ch, j) => <span className="chip" key={j}>{ch}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  const [form, setForm] = useState({ name: "", email: "", company: "", type: "Electronics", message: "" });
  const [status, setStatus] = useState("idle"); // idle | sending | success | error
  const f = t.contact.form;

  const update = (key) => (e) => setForm((s) => ({ ...s, [key]: e.target.value }));

  // === MAIL GÖNDERİMİ (Web3Forms üzerinden — statik site dostu, ücretsiz) ===
  // 1. https://web3forms.com adresine git
  // 2. "Create Access Key" → e-posta adresinizi (hello@airchip.com.tr) gir
  // 3. Aldığın access key'i aşağıdaki sabite yapıştır
  // Boş bırakırsan form otomatik mailto fallback'ine düşer.
  const WEB3FORMS_KEY = "2badf2ff-06a8-4d0d-9312-2af784e71ae0";

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) return;
    setStatus("sending");

    if (WEB3FORMS_KEY) {
      try {
        const payload = {
          access_key: WEB3FORMS_KEY,
          subject: `[${form.type}] ${form.name}${form.company ? " · " + form.company : ""}`,
          from_name: form.name,
          name: form.name,
          email: form.email,
          company: form.company || "-",
          interest: form.type,
          message: form.message,
        };
        const res = await fetch("https://api.web3forms.com/submit", {
          method: "POST",
          headers: { "Content-Type": "application/json", Accept: "application/json" },
          body: JSON.stringify(payload),
        });
        const data = await res.json();
        if (res.ok && data.success) {
          setStatus("success");
        } else {
          setStatus("error");
        }
      } catch (err) {
        setStatus("error");
      }
      return;
    }

    // Fallback: mailto (access key tanımlı değilse)
    const subject = encodeURIComponent(`[${form.type}] ${form.name}${form.company ? " · " + form.company : ""}`);
    const body = encodeURIComponent(
      `Ad: ${form.name}\nE-posta: ${form.email}\nŞirket: ${form.company || "-"}\nİlgi: ${form.type}\n\n${form.message}`
    );
    window.location.href = `mailto:hello@airchip.com.tr?subject=${subject}&body=${body}`;
    setTimeout(() => setStatus("success"), 300);
  };

  if (status === "success") {
    return (
      <section className="contact" id="contact">
        <div className="wrap">
          <div className="contact-grid">
            <div className="reveal">
              <div className="eyebrow">{t.contact.eyebrow}</div>
              <RichHeading parts={t.contact.h2} tag="h2" />
              <p className="lede">{t.contact.lede}</p>
            </div>
            <div className="contact-card form-success reveal">
              <div className="success-mark"><Icon.Arrow /></div>
              <p className="success-msg">{f.success}</p>
              <button type="button" className="link-reset" onClick={() => { setStatus("idle"); setForm({ name: "", email: "", company: "", type: "Electronics", message: "" }); }}>
                ← {f.send}
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="contact" id="contact">
      <div className="wrap">
        <div className="contact-grid">
          <div className="reveal">
            <div className="eyebrow">{t.contact.eyebrow}</div>
            <RichHeading parts={t.contact.h2} tag="h2" />
            <p className="lede">{t.contact.lede}</p>
            <div className="contact-side-rows">
              {t.contact.rows.map((r, i) => (
                <div className="side-row" key={i}>
                  <div className="k">{r.k}</div>
                  <a className="v" href={r.href}>{r.v}</a>
                </div>
              ))}
            </div>
          </div>

          <form className="contact-form reveal" onSubmit={onSubmit} noValidate>
            <div className="field-row">
              <Field label={f.name.label}>
                <input type="text" placeholder={f.name.placeholder} value={form.name} onChange={update("name")} required />
              </Field>
              <Field label={f.email.label}>
                <input type="email" placeholder={f.email.placeholder} value={form.email} onChange={update("email")} required />
              </Field>
            </div>
            <Field label={f.company.label}>
              <input type="text" placeholder={f.company.placeholder} value={form.company} onChange={update("company")} />
            </Field>

            <Field label={f.type.label}>
              <div className="type-chips">
                {f.type.options.map((opt) => (
                  <button
                    type="button" key={opt}
                    className={"type-chip" + (form.type === opt ? " active" : "")}
                    onClick={() => setForm((s) => ({ ...s, type: opt }))}
                  >
                    {opt}
                  </button>
                ))}
              </div>
            </Field>

            <Field label={f.message.label}>
              <textarea rows={5} placeholder={f.message.placeholder} value={form.message} onChange={update("message")} required />
            </Field>

            <div className="form-foot">
              <span className="privacy-note">{f.privacy}</span>
              <button type="submit" className="form-submit" disabled={status === "sending"}>
                <span>{status === "sending" ? f.sending : f.send}</span>
                <Icon.Arrow />
              </button>
            </div>
            {status === "error" && <div className="form-err">{f.error}</div>}
          </form>
        </div>
      </div>
    </section>
  );
}

// Form field wrapper with label
function Field({ label, children }) {
  return (
    <label className="field">
      <span className="field-label">{label}</span>
      {children}
    </label>
  );
}

// ====== TWEAK CONTROLS ======
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "lang": "en",
  "accent": "bold",
  "heroVariant": "marquee",
  "scheme": "coral"
}/*EDITMODE-END*/;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang === "en" ? "en" : "tr";
  const copy = window.COPY[lang];

  // Init lang from localStorage on first paint (overrides tweak default if set).
  const didInit = React.useRef(false);
  useEffect(() => {
    if (didInit.current) return;
    didInit.current = true;
    const stored = window.getStoredLang && window.getStoredLang();
    if (stored && stored !== t.lang) setT("lang", stored);
  }, []);

  useEffect(() => {
    applyAppearance(t);
    if (window.setStoredLang) window.setStoredLang(lang);
  }, [t.theme, t.scheme, t.lang]);
  useReveal();

  const switchLang = (v) => setT("lang", v);

  return (
    <>
      <Nav t={copy} page="home" lang={lang} onLang={switchLang} />
      <Hero t={copy} accent={t.accent} variant={t.heroVariant} />
      <Services t={copy} />
      <Process t={copy} />
      {/* Featured work — gizli, ileride doldurulacak */}
      {false && <CaseStudy t={copy} />}
      <Tech t={copy} />
      <Contact t={copy} />
      <Footer lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Dil & Tema">
          <TweakRadio
            label="Dil"
            value={t.lang}
            onChange={(v) => setT("lang", v)}
            options={[
              { value: "tr", label: "Türkçe" },
              { value: "en", label: "English" },
            ]}
          />
          <TweakRadio
            label="Tema"
            value={t.theme}
            onChange={(v) => setT("theme", v)}
            options={[
              { value: "light", label: "Açık" },
              { value: "dark",  label: "Koyu" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Görünüm">
          <TweakSelect
            label="Renk şeması"
            value={t.scheme}
            onChange={(v) => setT("scheme", v)}
            options={[
              { value: "coral",    label: "Coral · orijinal (mercan)" },
              { value: "ink",      label: "Ink · derin lacivert" },
              { value: "forest",   label: "Forest · zümrüt yeşili" },
              { value: "amber",    label: "Amber · sıcak turuncu" },
              { value: "graphite", label: "Graphite · neredeyse mono" },
            ]}
          />
          <TweakSelect
            label="Hero"
            value={t.heroVariant}
            onChange={(v) => setT("heroVariant", v)}
            options={[
              { value: "default",  label: "Standart · solda metin / sağda logo" },
              { value: "minimal",  label: "Minimal · ortalanmış" },
              { value: "marquee",  label: "Marquee · alt şerit" },
            ]}
          />
          <TweakRadio
            label="Accent"
            value={t.accent}
            onChange={(v) => setT("accent", v)}
            options={[
              { value: "subtle", label: "Sade" },
              { value: "bold",   label: "Izgaralı" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);