// FashionFactoryDirect — shared components

const Brand = ({ onNav }) => (
  <a className="brand" onClick={() => onNav && onNav('home')}>
    <span className="ffd-mark">FFD</span>
    <span>FashionFactoryDirect</span>
  </a>
);

const Nav = ({ page, onNav, lang, setLang, t }) => {
  const links = [
    ['home', t.nav.home],
    ['services', t.nav.services],
    ['forbrands', t.nav.forbrands],
    ['joor', t.nav.joor],
    ['about', t.nav.about],
    ['contact', t.nav.contact],
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Brand onNav={onNav} />
        <div className="nav-links">
          {links.map(([k, label]) => (
            <a key={k}
               className={`nav-link ${page === k ? 'active' : ''}`}
               onClick={() => onNav(k)}>
              {label}
            </a>
          ))}
        </div>
        <div className="nav-right">
          <button className="lang-toggle" onClick={() => setLang(lang === 'tr' ? 'en' : 'tr')}>
            <span className={lang === 'tr' ? 'on' : ''}>TR</span>
            <span className={lang === 'en' ? 'on' : ''}>EN</span>
          </button>
          <button className="btn" onClick={() => onNav('contact')}>{t.nav.apply}</button>
        </div>
      </div>
    </nav>
  );
};

const HeroMedia = ({ src }) => {
  if (src) {
    return (
      <video src={src} autoPlay loop muted playsInline />
    );
  }
  return (
    <div className="media-placeholder" aria-hidden="true" />
  );
};

// ── Hero variants ────────────────────────────────────────
const HeroA = ({ t, videoSrc, onNav }) => (
  <section className="hero">
    <div className="hero-media"><HeroMedia src={videoSrc} /></div>
    <div className="hero-inner">
      <div className="hero-eyebrow eyebrow"><span className="dot" /> {t.hero.eyebrow}</div>
      <h1>{richText(t.hero.title)}</h1>
      <p className="lede">{t.hero.lede}</p>
      <div className="hero-cta">
        <button className="btn" onClick={() => onNav('contact')}>{t.hero.primary} <span className="arr">→</span></button>
        <button className="btn btn-ghost" onClick={() => onNav('forbrands')}>{t.hero.secondary}</button>
      </div>
      <div className="hero-meta">
        <span className="small">{t.hero.meta1}</span>
        <span className="small">{t.hero.meta2}</span>
        <span className="small">{t.hero.meta3}</span>
      </div>
    </div>
  </section>
);

const HeroB = ({ t, videoSrc, onNav }) => (
  <section className="hero-split">
    <div className="hero-text">
      <div className="hero-eyebrow eyebrow"><span className="dot" style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)',display:'inline-block'}} /> {t.hero.eyebrow}</div>
      <h1>{richText(t.hero.title)}</h1>
      <p className="lede">{t.hero.lede}</p>
      <div className="hero-cta">
        <button className="btn" onClick={() => onNav('contact')}>{t.hero.primary} <span className="arr">→</span></button>
        <button className="btn btn-ghost" onClick={() => onNav('forbrands')}>{t.hero.secondary}</button>
      </div>
      <div className="hero-meta">
        <span className="small">{t.hero.meta1}</span>
        <span className="small">{t.hero.meta2}</span>
      </div>
    </div>
    <div className="hero-media-side"><HeroMedia src={videoSrc} /></div>
  </section>
);

const HeroC = ({ t, videoSrc, onNav }) => (
  <section className="hero-stack">
    <div className="hero-stack-top">
      <div>
        <div className="hero-eyebrow eyebrow" style={{color:'var(--ink-3)'}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)',display:'inline-block'}} /> {t.hero.eyebrow}
        </div>
        <h1 style={{marginTop:20}}>{richText(t.hero.title)}</h1>
        <div className="hero-cta">
          <button className="btn" onClick={() => onNav('contact')}>{t.hero.primary} <span className="arr">→</span></button>
          <button className="btn btn-ghost" onClick={() => onNav('forbrands')}>{t.hero.secondary}</button>
        </div>
      </div>
      <div>
        <p className="lede">{t.hero.lede}</p>
        <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:20, paddingTop:20, borderTop:'0.5px solid var(--line)'}}>
          <span className="small">{t.hero.meta1}</span>
          <span className="small">{t.hero.meta2}</span>
          <span className="small">{t.hero.meta3}</span>
        </div>
      </div>
    </div>
    <div className="hero-stack-media"><HeroMedia src={videoSrc} /></div>
  </section>
);

const Hero = ({ variant, ...props }) => {
  if (variant === 'split') return <HeroB {...props} />;
  if (variant === 'stack') return <HeroC {...props} />;
  return <HeroA {...props} />;
};

// ── Marquee ───────────────────────────────────────────────
const Marquee = ({ items }) => {
  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((x, i) => <span className="marquee-item" key={i}>{x}</span>)}
      </div>
    </div>
  );
};

// ── Services variants ────────────────────────────────────
const ServicesList = ({ items, onNav }) => (
  <div className="svc-list">
    {items.map(it => (
      <div key={it.num} className="svc-row" onClick={() => onNav('services')}>
        <div className="num">{it.num}</div>
        <div>
          <h3>{it.title}</h3>
          <div className="tiny" style={{marginTop:8}}>{it.name}</div>
        </div>
        <div className="desc">{it.desc}</div>
        <div className="arr">→</div>
      </div>
    ))}
  </div>
);

const ServicesGrid = ({ items, onNav }) => (
  <div className="svc-grid">
    {items.map(it => (
      <div key={it.num} className="svc-card" onClick={() => onNav('services')}>
        <div className="img" style={{backgroundImage:`url(${IMG_SLOTS['service_'+it.name] || ''})`, backgroundSize:'cover', backgroundPosition:'center'}} />
        <div className="body">
          <div className="tiny">{it.name}</div>
          <h3>{it.title}</h3>
          <div className="desc">{it.desc}</div>
          <div className="meta">
            <span className="num">{it.num}</span>
            <span className="tiny">Learn more →</span>
          </div>
        </div>
      </div>
    ))}
  </div>
);

const ServicesEditorial = ({ items, onNav }) => (
  <div className="svc-edit">
    {items.map((it, i) => (
      <div key={it.num} className={`svc-edit-row ${i % 2 === 1 ? 'flip' : ''}`}>
        <div className="img-col" style={{backgroundImage:`url(${IMG_SLOTS['service_'+it.name] || ''})`, backgroundSize:'cover', backgroundPosition:'center'}} />
        <div className="txt-col">
          <div className="num">{it.num} — {it.name}</div>
          <h3>{it.title}</h3>
          <p className="lede" style={{margin:0}}>{it.desc}</p>
          <button className="btn-link" onClick={() => onNav('services')}>Read more <span>→</span></button>
        </div>
      </div>
    ))}
  </div>
);

const Services = ({ variant, items, onNav }) => {
  if (variant === 'grid') return <ServicesGrid items={items} onNav={onNav} />;
  if (variant === 'editorial') return <ServicesEditorial items={items} onNav={onNav} />;
  return <ServicesList items={items} onNav={onNav} />;
};

// ── Warehouses / Map ─────────────────────────────────────
// Pin positions roughly on a US map (percentage in 16:9 stage)
const PIN_POS = {
  'Chicago':    { x: 50, y: 32 },
  'New Jersey': { x: 77, y: 31 },
  'Texas':      { x: 41, y: 64 },
  'Atlanta':    { x: 64, y: 56 },
};

const WarehousesSection = ({ t }) => (
  <section className="section warehouses">
    <div className="wrap">
      <div className="section-head">
        <div>
          <div className="eyebrow" style={{marginBottom:16}}>{t.warehouses.eyebrow}</div>
          <h2 className="display-lg">{richText(t.warehouses.title)}</h2>
        </div>
        <p className="lede">{t.warehouses.lede}</p>
      </div>
      <div className="map-card">
        <div className="map-stage">
          {/* Subtle US silhouette hint via positioned outlines */}
          <svg viewBox="0 0 100 56" preserveAspectRatio="none"
               style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.18}}>
            <path d="M5,18 L20,14 L35,12 L48,10 L62,12 L78,11 L92,16 L95,24 L88,30 L82,40 L70,48 L55,50 L42,48 L30,46 L20,42 L12,34 L8,26 Z"
                  fill="none" stroke="rgba(250,248,244,0.45)" strokeWidth="0.3" />
          </svg>
          {t.warehouses.items.map(w => {
            const pos = PIN_POS[w.city] || PIN_POS['Chicago'];
            return (
              <div key={w.city} className={`map-pin ${w.office ? 'is-office' : ''}`} style={{left: pos.x + '%', top: pos.y + '%'}}>
                <span className="dot" />
                <span className="label">{w.city}</span>
                <span className="sub">{w.sub}</span>
              </div>
            );
          })}
        </div>
        <div className="warehouse-list">
          {t.warehouses.items.map(w => (
            <div className={`warehouse-item ${w.office ? 'is-office' : ''}`} key={w.city}>
              <div>
                <h4>{w.city} {w.office && <span className="office-mark">●</span>}</h4>
                <div className="small">{w.sub}</div>
              </div>
              <span className="tag">{w.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ── Process steps ────────────────────────────────────────
const ProcessSection = ({ t }) => (
  <section className="section">
    <div className="wrap">
      <div className="section-head">
        <div>
          <div className="eyebrow" style={{marginBottom:16}}>{t.process.eyebrow}</div>
          <h2 className="display-lg">{richText(t.process.title)}</h2>
        </div>
        <div />
      </div>
      <div className="steps">
        {t.process.steps.map(s => (
          <div className="step" key={s.num}>
            <div className="num">{s.num}</div>
            <h4>{s.title}</h4>
            <p>{s.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── Stats ────────────────────────────────────────────────
const StatsSection = ({ t }) => (
  <div className="wrap" style={{paddingTop: 0, paddingBottom: 0}}>
    <div className="stats">
      {t.stats.map(s => (
        <div className="stat" key={s.label}>
          <div className="num">{s.num}</div>
          <div className="label">{s.label}</div>
        </div>
      ))}
    </div>
  </div>
);

// ── Dual CTA ─────────────────────────────────────────────
const DualCTASection = ({ t, onNav }) => (
  <section className="section" style={{paddingTop: 0}}>
    <div className="wrap">
      <div className="dual-cta">
        <div className="col">
          <div className="eyebrow">{t.cta.eyebrow}</div>
          <h3>{richText(t.cta.forBrandTitle)}</h3>
          <p className="lede">{t.cta.forBrandLede}</p>
          <button className="btn" onClick={() => onNav('forbrands')}>{t.cta.forBrandBtn} <span className="arr">→</span></button>
        </div>
        <div className="col dark">
          <div className="eyebrow">{t.cta.eyebrow}</div>
          <h3>{richText(t.cta.forMfrTitle)}</h3>
          <p className="lede">{t.cta.forMfrLede}</p>
          <button className="btn" onClick={() => onNav('contact')}>{t.cta.forMfrBtn} <span className="arr">→</span></button>
        </div>
      </div>
    </div>
  </section>
);

// ── Footer ───────────────────────────────────────────────
const Footer = ({ t, onNav }) => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="brand-block">
        <Brand onNav={onNav} />
        <div className="small">{t.footer.tag}</div>
      </div>
      <div>
        <h4>{t.footer.h1}</h4>
        <ul>
          <li onClick={() => onNav('services')}>Sourcing</li>
          <li onClick={() => onNav('services')}>Wholesale</li>
          <li onClick={() => onNav('services')}>Distribution</li>
          <li onClick={() => onNav('services')}>Online</li>
        </ul>
      </div>
      <div>
        <h4>{t.footer.h2}</h4>
        <ul>
          <li onClick={() => onNav('forbrands')}>{t.nav.forbrands}</li>
          <li onClick={() => onNav('joor')}>{t.nav.joor}</li>
          <li onClick={() => onNav('about')}>{t.nav.about}</li>
          <li onClick={() => onNav('contact')}>{t.nav.contact}</li>
          <li onClick={() => onNav('contact')}>{t.nav.apply}</li>
        </ul>
      </div>
      <div>
        <h4>{t.footer.h3}</h4>
        <ul>
          <li>JOOR partner page</li>
          <li>Press kit</li>
          <li>Manufacturer guide (PDF)</li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>{t.footer.rights}</span>
      <span>{t.footer.privacy}</span>
    </div>
  </footer>
);

Object.assign(window, {
  Brand, Nav, Hero, Marquee, Services,
  WarehousesSection, ProcessSection, StatsSection,
  DualCTASection, Footer,
  HeroMedia
});