/* global React, ReactDOM */
const { useState, useEffect, useRef } = window;

function HomeApp() {
  const [lang, setLang, t] = useLang();
  useReveal();

  const [heroVariant, setHeroVariant] = useState("photo");
  const [accent, setAccent] = useState("copper");
  const [theme, setTheme] = useState("light");
  const [density, setDensity] = useState("default");
  const [typeface, setTypeface] = useState("serif-first");

  useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = theme;
    root.dataset.density = density;
    root.dataset.typeface = typeface;
    const map = {
      copper: "#C7754A", teal: "#3F8A86", gold: "#B8945A", navy: "#284E78"
    };
    root.style.setProperty("--accent", map[accent]);
  }, [theme, density, typeface, accent]);

  const tweaks = (window.useTweaks || (() => [{}, () => {}]))({
    heroVariant: "photo", accent: "copper", theme: "light", density: "default", typeface: "serif-first"
  });
  const [tw, setTweak] = tweaks;

  useEffect(() => {
    if (tw.heroVariant) setHeroVariant(tw.heroVariant);
    if (tw.accent) setAccent(tw.accent);
    if (tw.theme) setTheme(tw.theme);
    if (tw.density) setDensity(tw.density);
    if (tw.typeface) setTypeface(tw.typeface);
  }, [tw]);

  return (
    <>
      <Header active="home" t={t} lang={lang} setLang={setLang} transparent={true} />
      <Hero t={t} variant={heroVariant} />
      <ServicesPreview t={t} />
      <Stats t={t} />
      <PortsPreview t={t} />
      <Cases t={t} />
      <Clients t={t} />
      <QuickRequest t={t} />
      <News t={t} />
      <Footer t={t} />
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Hero variant">
            <window.TweakRadio value={tw.heroVariant} onChange={v => setTweak("heroVariant", v)}
              options={[
                { value: "photo", label: "Foto" },
                { value: "video", label: "Video" },
                { value: "editorial", label: "Editorial" },
                { value: "industrial", label: "Industrial" }
              ]} />
          </window.TweakSection>
          <window.TweakSection title="Accent color">
            <window.TweakRadio value={tw.accent} onChange={v => setTweak("accent", v)}
              options={[
                { value: "copper", label: "Copper" },
                { value: "navy", label: "Navy" },
                { value: "teal", label: "Teal" },
                { value: "gold", label: "Gold" }
              ]} />
          </window.TweakSection>
          <window.TweakSection title="Theme">
            <window.TweakRadio value={tw.theme} onChange={v => setTweak("theme", v)}
              options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]} />
          </window.TweakSection>
          <window.TweakSection title="Density">
            <window.TweakRadio value={tw.density} onChange={v => setTweak("density", v)}
              options={[{ value: "default", label: "Aireada" }, { value: "compact", label: "Compacta" }]} />
          </window.TweakSection>
          <window.TweakSection title="Tipografía">
            <window.TweakRadio value={tw.typeface} onChange={v => setTweak("typeface", v)}
              options={[{ value: "serif-first", label: "Serif" }, { value: "sans-first", label: "Sans" }, { value: "editorial", label: "Editorial" }]} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

function Hero({ t, variant }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-media">
        {variant === "photo" ? (
          <img src="assets/photos/01-hero.jpg" alt="Container ship docked at dusk" style={{width:"100%", height:"100%", objectFit:"cover"}} />
        ) : variant === "video" ? (
          <>
            <video autoPlay muted loop playsInline poster="">
              <source src="https://cdn.coverr.co/videos/coverr-cargo-ship-at-the-port-2517/1080p.mp4" type="video/mp4" />
            </video>
            <div className="hero-fallback" style={{position:"absolute", inset:0, zIndex:-1}} />
          </>
        ) : variant === "editorial" ? (
          <div className="hero-fallback" style={{
            background: "linear-gradient(135deg, #0a1828 0%, #14304D 50%, #1B3A5C 100%)"
          }}>
            <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" style={{width:"100%", height:"100%", opacity: 0.4}}>
              <g stroke="rgba(255,255,255,0.4)" strokeWidth="1" fill="none">
                {Array.from({length: 24}).map((_, i) => (
                  <line key={i} x1="0" y1={300 + i*30} x2="1600" y2={250 + i*30 + Math.sin(i*0.4)*40} />
                ))}
              </g>
              {/* Ship silhouette */}
              <g fill="rgba(255,255,255,0.15)">
                <path d="M 900 480 L 1300 480 L 1280 540 L 920 540 Z" />
                <rect x="1050" y="380" width="120" height="100" />
                <rect x="1100" y="320" width="40" height="60" />
              </g>
            </svg>
          </div>
        ) : (
          <div className="hero-fallback" style={{
            background: "radial-gradient(ellipse at 60% 40%, #1B3A5C 0%, #0a1828 70%)"
          }}>
            <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" style={{width:"100%", height:"100%"}}>
              {/* Crane skeleton */}
              <g stroke="rgba(255,255,255,0.35)" strokeWidth="1.5" fill="none">
                <path d="M 200 700 L 200 200 L 1100 200 L 1100 400 L 1400 400" />
                <path d="M 200 200 L 1100 400" strokeDasharray="3 4" />
                <line x1="700" y1="200" x2="700" y2="600" />
                <line x1="900" y1="200" x2="900" y2="500" />
                <rect x="180" y="700" width="40" height="100" fill="rgba(255,255,255,0.1)" />
                <rect x="1080" y="380" width="40" height="40" fill="rgba(199,117,74,0.5)" />
              </g>
              <g opacity="0.4">
                {Array.from({length: 30}).map((_, i) => (
                  <rect key={i} x={1200 + (i%6)*30} y={500 + Math.floor(i/6)*30} width="28" height="28"
                        fill={i%3===0 ? "rgba(199,117,74,0.6)" : "rgba(255,255,255,0.15)"} />
                ))}
              </g>
            </svg>
          </div>
        )}
      </div>

      <div className="hero-content reveal">
        <div className="container">
          <div style={{marginBottom: 40}}>
            <span className="eyebrow" style={{color:"rgba(255,255,255,0.7)"}}>{t.hero.eyebrow}</span>
          </div>
          <div className="hero-grid">
            <h1 className="display">
              {t.hero.title_a}
              <span className="cu">{t.hero.title_b}</span>
            </h1>
            <div className="hero-meta">
              <p className="hero-lede">{t.hero.lede}</p>
              <div className="hero-cta">
                <a href="contact.html" className="btn">{t.cta.request} <span className="arrow">→</span></a>
                <a href="services.html" className="btn ghost">{t.cta.explore}</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stats">
        <div className="row"><strong>{t.hero.stat1_v}</strong><span>{t.hero.stat1_l}</span></div>
        <div className="row"><strong>{t.hero.stat2_v}</strong><span>{t.hero.stat2_l}</span></div>
        <div className="row"><strong>{t.hero.stat3_v}</strong><span>{t.hero.stat3_l}</span></div>
      </div>

      <div className="hero-marquee">
        <div className="marquee-track">
          <span>
            {t.marquee.concat(t.marquee).map((p, i) => (
              <React.Fragment key={i}>
                <span>{p}</span>
                <span className="dot">●</span>
              </React.Fragment>
            ))}
          </span>
        </div>
      </div>
    </section>
  );
}

function ServicesPreview({ t }) {
  return (
    <section className="s" id="services" data-screen-label="02 Services">
      <div className="container">
        <div className="s-head reveal">
          <div>
            <span className="num">{t.services_section.num}</span>
            <h2 className="display">
              {t.services_section.title_a} <em style={{fontStyle:"italic", color:"var(--accent)"}}>{t.services_section.title_b}</em>
            </h2>
          </div>
          <p className="lede">{t.services_section.lede}</p>
        </div>
        <div className="svc-list reveal">
          {t.services.map((s, i) => (
            <a key={s.id} href={`services.html#${s.id}`} className="svc-row">
              <span className="num">0{i+1}</span>
              <span className="name">{s.name}</span>
              <span className="desc">{s.desc}</span>
              <span className="arrow">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M3 9 L15 9 M9 3 L15 9 L9 15" stroke="currentColor" strokeWidth="1.4" />
                </svg>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats({ t }) {
  const ref = useRef(null);
  return (
    <section className="stats" data-screen-label="03 Stats" ref={ref}>
      <div className="container stats-inner">
        <span className="eyebrow" style={{color:"rgba(255,255,255,0.6)"}}>{t.stats_section.eyebrow}</span>
        <div className="stats-grid">
          {t.stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="v">{s.v}{s.u && <span className="unit">{s.u}</span>}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PortsPreview({ t }) {
  const ports = [
    { code: "LPA", name: "Las Palmas", badges: ["HQ", "24/7"] },
    { code: "BCN", name: "Barcelona", badges: ["24/7"] },
    { code: "VLC", name: "Valencia", badges: ["24/7"] },
    { code: "ALG", name: "Algeciras", badges: ["24/7"] },
    { code: "BIO", name: "Bilbao", badges: [] },
    { code: "TFE", name: "S.C. de Tenerife", badges: [] },
    { code: "CTG", name: "Cartagena", badges: [] },
    { code: "TRG", name: "Tarragona", badges: [] },
    { code: "VGO", name: "Vigo", badges: [] },
    { code: "MLG", name: "Málaga", badges: [] },
    { code: "CAD", name: "Cádiz", badges: [] },
    { code: "HUV", name: "Huelva", badges: [] },
  ];
  return (
    <section className="s ports" data-screen-label="04 Ports">
      <div className="container">
        <div className="s-head reveal">
          <div>
            <span className="num">{t.ports_section.num}</span>
            <h2 className="display">
              {t.ports_section.title_a}<br/>
              <em style={{fontStyle:"italic", color:"var(--accent)"}}>{t.ports_section.title_b}</em>
            </h2>
          </div>
          <p className="lede">{t.ports_section.lede}</p>
        </div>

        <div className="ports-layout reveal">
          <div className="map-wrap">
            <SpainMap />
          </div>
          <div className="port-list">
            {ports.map(p => (
              <div key={p.code} className="port">
                <span className="code">{p.code}</span>
                <span className="name">{p.name}</span>
                <span className="badges">
                  {p.badges.map(b => <span key={b} className={`badge ${b === "24/7" ? "live" : ""}`}>{b}</span>)}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Cases({ t }) {
  return (
    <section className="s" data-screen-label="05 Cases">
      <div className="container">
        <div className="s-head reveal">
          <div>
            <span className="num">{t.cases_section.num}</span>
            <h2 className="display">
              {t.cases_section.title_a}<br/>
              <em style={{fontStyle:"italic", color:"var(--accent)"}}>{t.cases_section.title_b}</em>
            </h2>
          </div>
          <p className="lede">{t.cases_section.lede}</p>
        </div>
        <div className="case-grid reveal">
          {t.cases.map((c, i) => {
            const photos = ["assets/photos/02-case-cruise-lpa.jpg", "assets/photos/03-case-offshore-alg.jpg", "assets/photos/04-case-bulk-trg.jpg"];
            return (
              <article key={i} className="case">
                <div className="figure" style={{aspectRatio: "4 / 5", padding: 0, background: "var(--navy-100)"}}>
                  <img src={photos[i]} alt={`${c.tag} ${c.port}`} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                  <div className="figure-caption">{`Caso ${String(i+1).padStart(2,"0")}`}</div>
                </div>
                <div className="meta">
                  <span className="tag">{c.tag}</span>
                  <span>{c.port}</span>
                </div>
                <h3>{c.title}</h3>
                {c.desc && <p className="desc">{c.desc}</p>}
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Clients({ t }) {
  const clients = ["Mediterranean Shipping Co.", "Royal Caribbean", "Maersk Line", "CMA CGM", "Brittany Ferries", "Hapag-Lloyd"];
  return (
    <section className="clients">
      <div className="container">
        <div style={{marginBottom: 40}}>
          <span className="eyebrow">{t.clients_eyebrow}</span>
        </div>
        <div className="clients-row">
          {clients.map(c => <span key={c} className="client-name">{c}</span>)}
        </div>
      </div>
    </section>
  );
}

function QuickRequest({ t }) {
  return (
    <section className="s qr" data-screen-label="06 QuickRequest">
      <div className="container qr-inner">
        <div className="reveal">
          <span className="num" style={{fontFamily:"var(--mono)", fontSize:12, color:"var(--copper-500)", letterSpacing:"0.18em", display:"block", marginBottom:16}}>{t.qr_section.num}</span>
          <h2 className="display" style={{color:"white"}}>
            {t.qr_section.title_a}<br/>
            <em style={{fontStyle:"italic", color:"var(--copper-500)"}}>{t.qr_section.title_b}</em>
          </h2>
          <p className="lede" style={{color:"rgba(255,255,255,0.7)", marginTop: 24, maxWidth: 50+"ch"}}>{t.qr_section.lede}</p>
        </div>
        <form className="qr-form reveal" onSubmit={(e) => { e.preventDefault(); alert("Form is a demo — no submission."); }}>
          <div className="row">
            <div className="field">
              <label>{t.qr_section.vessel}</label>
              <input type="text" placeholder="MV Lorem Mar" />
            </div>
            <div className="field">
              <label>{t.qr_section.imo}</label>
              <input type="text" placeholder="9123456" />
            </div>
          </div>
          <div className="row">
            <div className="field">
              <label>{t.qr_section.port}</label>
              <select><option>Las Palmas</option><option>Barcelona</option><option>Valencia</option><option>Algeciras</option><option>Bilbao</option></select>
            </div>
            <div className="field">
              <label>{t.qr_section.date}</label>
              <input type="date" />
            </div>
          </div>
          <div className="row">
            <div className="field">
              <label>{t.qr_section.service}</label>
              <select>{t.services.map(s => <option key={s.id}>{s.name}</option>)}</select>
            </div>
            <div className="field">
              <label>{t.qr_section.contact}</label>
              <input type="email" placeholder="sales@ptsspain.com" />
            </div>
          </div>
          <div className="submit-row">
            <span className="legal">{t.qr_section.legal}</span>
            <button type="submit" className="btn">{t.qr_section.submit} <span className="arrow">→</span></button>
          </div>
        </form>
      </div>
    </section>
  );
}

function News({ t }) {
  return (
    <section className="s news" data-screen-label="07 News">
      <div className="container">
        <div className="s-head reveal">
          <div>
            <span className="num">{t.news_section.num}</span>
            <h2 className="display">{t.news_section.title_a}</h2>
          </div>
          <p className="lede">{t.news_section.lede}</p>
        </div>
        <div className="news-grid reveal">
          <article className="news-feature">
            <div className="figure wide" style={{padding:0}}>
              <img src="assets/photos/05-news-feature-marpol.jpg" alt="MARPOL" style={{width:"100%", height:"100%", objectFit:"cover"}} />
            </div>
            <div className="meta"><span>{t.news[0].date}</span><span>{t.news[0].read}</span></div>
            <h3>{t.news[0].title}</h3>
            <p style={{color:"var(--ink-2)", fontSize:14, lineHeight:1.55}}>{t.news[0].desc}</p>
          </article>
          {t.news.slice(1, 3).map((n, i) => {
            const newsPhotos = ["assets/photos/06-news-canarias.jpg", "assets/photos/07-news-crew-night.jpg"];
            return (
              <article key={i} className="news-card">
                <div className="figure" style={{padding:0}}>
                  <img src={newsPhotos[i]} alt={n.title} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                </div>
                <div className="meta"><span>{n.date}</span><span>{n.read}</span></div>
                <h3>{n.title}</h3>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

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