// Hero, Challenges, Services, Why, News, CTA, Footer

const { useState: _useState, useEffect: _useEffect, useRef: _useRef } = React;

// ─── Top Nav ────────────────────────────────────────────────────────────────
const TOPNAV_HREFS = ['services/', 'mission/', 'company/', 'careers/', 'news/', 'contact/'];

const TopNav = ({ lang, setLang, t, accent, scrolled }) => {
  const [menuOpen, setMenuOpen] = _useState(false);
  _useEffect(() => {
    document.body.classList.toggle('no-scroll', menuOpen);
    return () => document.body.classList.remove('no-scroll');
  }, [menuOpen]);
  _useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const menuLabel = lang === 'en' ? 'Menu' : 'メニュー';
  const closeLabel = lang === 'en' ? 'Close' : '閉じる';
  return (
    <header className={`topnav ${scrolled || menuOpen ? 'topnav--scrolled' : ''}`}>
      <div className="topnav-inner">
        <a
          href="/"
          className="brand"
          onClick={(e) => {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
            // URLから #hash を除去（クエリは温存）
            if (window.location.hash) {
              history.replaceState(null, '', window.location.pathname + window.location.search);
            }
          }}
        >
          <img src="assets/marip-logo.svg" alt="MARIP" className="brand-logo" />
          <span className="brand-sub">Inc.</span>
        </a>
        <nav className="topnav-links">
          {t.nav.map((n, i) => (
            <a key={i} href={TOPNAV_HREFS[i] || '#'} className="topnav-link">
              <span className="topnav-link-num">0{i + 1}</span>
              <span>{n}</span>
            </a>
          ))}
        </nav>
        <div className="topnav-right">
          <div className="lang-switch">
            <button className={lang === 'ja' ? 'active' : ''} onClick={() => setLang('ja')}>JA</button>
            <span>/</span>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <MagneticButton variant="primary" accent={accent} href="contact/">{t.ctaPrimary}</MagneticButton>
          <button
            type="button"
            className={`nav-toggle ${menuOpen ? 'nav-toggle--open' : ''}`}
            aria-label={menuOpen ? closeLabel : menuLabel}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span className="nav-toggle-bar"></span>
          </button>
        </div>
      </div>
      <div
        className={`mobile-menu ${menuOpen ? 'mobile-menu--open' : ''}`}
        role="dialog"
        aria-hidden={!menuOpen}
      >
        <button
          type="button"
          className="mobile-menu-close"
          aria-label={closeLabel}
          onClick={() => setMenuOpen(false)}
        >
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
            <path d="M3 3l12 12M15 3L3 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
        <nav className="mobile-menu-nav">
          {t.nav.map((n, i) => (
            <a
              key={i}
              href={TOPNAV_HREFS[i] || '#'}
              className="mobile-menu-link"
              onClick={() => setMenuOpen(false)}
            >
              <span className="mobile-menu-link-num">0{i + 1}</span>
              <span>{n}</span>
            </a>
          ))}
        </nav>
        <div className="mobile-menu-foot">
          <div className="lang-switch lang-switch--mobile">
            <button className={lang === 'ja' ? 'active' : ''} onClick={() => setLang('ja')}>JA</button>
            <span>/</span>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <a
            href="contact/"
            className="mobile-menu-cta"
            onClick={() => setMenuOpen(false)}
            style={{ background: accent, color: '#0C1814' }}
          >
            <span>{t.ctaPrimary}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
      </div>
    </header>
  );
};

// ─── Hero ───────────────────────────────────────────────────────────────────
const Hero = ({ t, accent, theme, intensity }) => {
  const [time, setTime] = _useState('');
  _useEffect(() => {
    const tick = () => {
      const d = new Date();
      const pad = (n) => String(n).padStart(2, '0');
      setTime(`${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())} JST`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" id="top">
      <RippleCanvas theme={theme} intensity={intensity} />
      <div className="hero-grid">
        <span className="hero-grid-line" style={{ left: '16.66%' }}></span>
        <span className="hero-grid-line" style={{ left: '33.33%' }}></span>
        <span className="hero-grid-line" style={{ left: '50%' }}></span>
        <span className="hero-grid-line" style={{ left: '66.66%' }}></span>
        <span className="hero-grid-line" style={{ left: '83.33%' }}></span>
      </div>

      <div className="hero-content">
        <div className="hero-meta hero-meta-top">
          <div className="hero-meta-item">
            <span className="dot" style={{ background: accent }}></span>
            <span>Tokyo, Japan · {time}</span>
          </div>
        </div>

        <div className="hero-eyebrow">
          <span className="hero-eyebrow-line"></span>
          <span>{t.heroEyebrow}</span>
        </div>

        <h1 className="hero-title">
          <span className="hero-line">
            <SplitReveal text={t.heroLine1} delay={0.2} stagger={0.04} />
          </span>
          <span className="hero-line hero-line--accent" style={{ color: accent }}>
            <SplitReveal text={t.heroLine2} delay={0.5} stagger={0.04} />
          </span>
          <span className="hero-line">
            <SplitReveal text={t.heroLine3} delay={0.9} stagger={0.04} />
          </span>
        </h1>

        <Reveal delay={1.3} y={20}>
          <p className="hero-sub">{t.heroSub}</p>
        </Reveal>

        <Reveal delay={1.5} y={20}>
          <div className="hero-ctas">
            <MagneticButton variant="primary" accent={accent} href="contact/">{t.ctaPrimary}</MagneticButton>
            <MagneticButton variant="ghost" href="services/">{t.ctaSecondary}</MagneticButton>
          </div>
        </Reveal>

        <div className="hero-meta hero-meta-bottom">
          <div className="hero-meta-item">
            <span className="scroll-arrow">
              <svg width="14" height="14" viewBox="0 0 14 14">
                <path d="M7 2v10M3 8l4 4 4-4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
              </svg>
            </span>
            <span>{t.scrollHint}</span>
          </div>
          <div className="hero-meta-item">
            <span style={{ opacity: 0.5 }}>EST. 2023 · MARIP INC.</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Marquee band ───────────────────────────────────────────────────────────
const MarqueeBand = ({ accent }) => (
  <div className="marquee-band">
    <Marquee
      accent={accent}
      speed={50}
      items={[
        'Make Ripples',
        'System Engineering',
        'Web Development',
        'System Integration',
        'Project Success',
        'Est. 2023 · Tokyo',
      ]}
    />
  </div>
);

// ─── Challenges ─────────────────────────────────────────────────────────────
const Challenges = ({ t, accent }) => (
  <section className="section section-challenges" id="s0">
    <div className="section-head">
      <span className="eyebrow">{t.challengeEyebrow}</span>
      <h2 className="section-title">
        <SplitReveal text={t.challengeTitle} stagger={0.02} />
      </h2>
    </div>
    <div className="challenge-grid">
      {t.challenges.map((c, i) => (
        <Reveal key={i} delay={i * 0.08}>
          <div className="challenge-card">
            <div className="challenge-num" style={{ color: accent }}>{c.n}</div>
            <h3 className="challenge-title">{c.t}</h3>
            <p className="challenge-desc">{c.d}</p>
            <div className="challenge-line" style={{ background: accent }}></div>
          </div>
        </Reveal>
      ))}
    </div>
    <Reveal delay={0.3}>
      <div className="challenge-cta">
        <div className="challenge-cta-arrow" style={{ background: accent }}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M4 10h12M11 5l5 5-5 5" stroke="#0C1814" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <h3>{t.challengeCta}</h3>
      </div>
    </Reveal>
  </section>
);

// ─── Service thumb variants (no photo) ─────────────────────────────────────
const ServiceThumb = ({ variant, index, accent, label }) => {
  // variant: 'ripple' | 'type' | 'geo' | 'photo'
  if (variant === 'photo') {
    const bgs = [
      'linear-gradient(135deg, #1a3a34 0%, #0c1814 50%, #0a2d26 100%)',
      'linear-gradient(135deg, #2a1a38 0%, #0c1814 50%, #1a0a2d 100%)',
      'linear-gradient(135deg, #1a2838 0%, #0c1814 50%, #0a1a2d 100%)',
    ];
    return (
      <div className="service-thumb" style={{ background: bgs[index] }}>
        <svg className="service-thumb-ripple" viewBox="0 0 200 200">
          <circle cx="100" cy="100" r="20" fill="none" stroke={accent} strokeWidth="0.5" opacity="0.8" />
          <circle cx="100" cy="100" r="40" fill="none" stroke={accent} strokeWidth="0.5" opacity="0.5" />
          <circle cx="100" cy="100" r="65" fill="none" stroke={accent} strokeWidth="0.5" opacity="0.3" />
          <circle cx="100" cy="100" r="90" fill="none" stroke={accent} strokeWidth="0.5" opacity="0.15" />
        </svg>
        <span className="service-thumb-label">Image placeholder</span>
      </div>
    );
  }
  if (variant === 'type') {
    const glyphs = ['S', 'W', 'D'];
    const subs = ['SES', 'Web', 'Dev'];
    return (
      <div className="service-thumb service-thumb--type">
        <div className="svc-type-glyph" style={{ color: accent }}>{glyphs[index]}</div>
        <div className="svc-type-sub">{subs[index]}</div>
        <div className="svc-type-index">0{index + 1} / 03</div>
      </div>
    );
  }
  if (variant === 'geo') {
    return (
      <div className="service-thumb service-thumb--geo">
        <svg viewBox="0 0 200 126" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id={`grid-${index}`} width="12" height="12" patternUnits="userSpaceOnUse">
              <path d="M0 12h12M12 0v12" stroke={accent} strokeWidth="0.3" opacity="0.35" fill="none"/>
            </pattern>
          </defs>
          <rect width="200" height="126" fill={`url(#grid-${index})`} />
          {index === 0 && <>
            <circle cx="60" cy="63" r="40" fill="none" stroke={accent} strokeWidth="1"/>
            <circle cx="60" cy="63" r="26" fill="none" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
            <line x1="60" y1="63" x2="180" y2="63" stroke={accent} strokeWidth="0.6" opacity="0.5"/>
            <circle cx="180" cy="63" r="3" fill={accent}/>
          </>}
          {index === 1 && <>
            <rect x="30" y="30" width="64" height="64" fill="none" stroke={accent} strokeWidth="1"/>
            <rect x="46" y="46" width="64" height="64" fill="none" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
            <rect x="62" y="62" width="64" height="64" fill="none" stroke={accent} strokeWidth="0.4" opacity="0.35"/>
          </>}
          {index === 2 && <>
            <polygon points="100,20 160,100 40,100" fill="none" stroke={accent} strokeWidth="1"/>
            <polygon points="100,40 140,95 60,95" fill="none" stroke={accent} strokeWidth="0.6" opacity="0.6"/>
            <circle cx="100" cy="78" r="4" fill={accent}/>
          </>}
        </svg>
      </div>
    );
  }
  // ripple (default no-photo)
  return (
    <div className="service-thumb service-thumb--ripple">
      <svg className="service-thumb-ripple" viewBox="0 0 200 126" preserveAspectRatio="xMidYMid slice">
        {[...Array(8)].map((_, k) => (
          <circle
            key={k}
            cx="100" cy="63"
            r={8 + k * 10}
            fill="none"
            stroke={accent}
            strokeWidth="0.6"
            opacity={0.85 - k * 0.09}
          />
        ))}
        <circle cx="100" cy="63" r="3" fill={accent}/>
      </svg>
      <span className="service-thumb-label" style={{ color: accent }}>0{index + 1}</span>
    </div>
  );
};

// ─── Services ───────────────────────────────────────────────────────────────
const Services = ({ t, accent, thumbVariant = 'photo' }) => {
  return (
    <section className="section section-services" id="s1">
      <div className="section-head">
        <span className="eyebrow">{t.serviceEyebrow}</span>
        <h2 className="section-title">
          <SplitReveal text={t.serviceTitle} stagger={0.02} />
        </h2>
      </div>
      <div className="service-list">
        {t.services.map((s, i) => (
          <Reveal key={i} delay={i * 0.1}>
            <a
              href={s.href || '#'}
              target={s.external ? '_blank' : undefined}
              rel={s.external ? 'noopener noreferrer' : undefined}
              className={`service-row${s.external ? ' service-row--external' : ''}`}
            >
              <span className="service-num">{s.n}</span>
              <div className="service-title">
                <h3 style={{ whiteSpace: 'pre-line' }}>{s.t}</h3>
                <span className="service-jp">{s.jp}</span>
                {s.external && (
                  <span className="service-external" style={{ color: accent }}>
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                      <path d="M4 2h6v6M10 2L3 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    ensuma.jp
                  </span>
                )}
              </div>
              <p className="service-desc">{s.d}</p>
              <ServiceThumb variant={thumbVariant} index={i} accent={accent} />
              <span className="service-arrow" style={{ color: accent }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  {s.external ? (
                    <path d="M7 17L17 7M17 7H8M17 7v9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  ) : (
                    <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  )}
                </svg>
              </span>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ─── Why MARIP ──────────────────────────────────────────────────────────────
const WhyMarip = ({ t, accent }) => (
  <section className="section section-why" id="s2">
    <div className="section-head">
      <span className="eyebrow">{t.whyEyebrow}</span>
      <h2 className="section-title">
        <SplitReveal text={t.whyTitle} stagger={0.02} />
      </h2>
    </div>
    <div className="why-grid">
      {t.whys.map((w, i) => (
        <Reveal key={i} delay={i * 0.1}>
          <div className="why-card">
            <div className="why-card-head">
              <div className="why-ripple">
                <svg viewBox="0 0 120 120">
                  {[0, 1, 2, 3].map(k => (
                    <circle
                      key={k}
                      cx="60" cy="60"
                      r={10 + k * 14}
                      fill="none"
                      stroke={accent}
                      strokeWidth="0.8"
                      opacity={0.9 - k * 0.2}
                      style={{
                        transformOrigin: '60px 60px',
                        animation: `whyPulse 3s ease-in-out infinite`,
                        animationDelay: `${k * 0.3}s`,
                      }}
                    />
                  ))}
                </svg>
              </div>
              <h3 style={{ whiteSpace: 'pre-line' }}>{w.t}</h3>
            </div>
            <p>{w.d}</p>
            <div className="why-line" style={{ background: accent }}></div>
          </div>
        </Reveal>
      ))}
    </div>
  </section>
);

// ─── News ───────────────────────────────────────────────────────────────────
const News = ({ t, accent }) => (
  <section className="section section-news" id="s4">
    <div className="section-head">
      <span className="eyebrow">{t.newsEyebrow}</span>
      <h2 className="section-title">{t.newsTitle}</h2>
    </div>
    <div className="news-list">
      {t.news.map((n, i) => (
        <Reveal key={i} delay={i * 0.06}>
          <a href={n.href || 'news/'} className="news-row">
            <span className="news-date">{n.d}</span>
            <span className="news-cat" style={{ borderColor: accent, color: accent }}>{n.c}</span>
            <span className="news-title">{n.t}</span>
            <span className="news-arrow">→</span>
          </a>
        </Reveal>
      ))}
    </div>
    <Reveal delay={0.2}>
      <a href="news/" className="news-more">
        <span>{t.newsMore}</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </a>
    </Reveal>
  </section>
);

// ─── Final CTA ──────────────────────────────────────────────────────────────
const FinalCTA = ({ t, accent, theme, intensity }) => (
  <section className="section section-cta" id="s5">
    <div className="cta-canvas">
      <RippleCanvas theme={theme} intensity={intensity * 1.2} />
    </div>
    <div className="cta-content">
      <span className="eyebrow" style={{ color: accent }}>{t.ctaEyebrow}</span>
      <h2 className="cta-title">
        <SplitReveal text={t.ctaTitle} stagger={0.025} />
      </h2>
      <Reveal delay={0.3}>
        <p className="cta-sub">{t.ctaSub}</p>
      </Reveal>
      <Reveal delay={0.5}>
        <MagneticButton variant="primary" accent={accent} href="contact/">{t.ctaButton}</MagneticButton>
      </Reveal>
    </div>
  </section>
);

// ─── Footer ─────────────────────────────────────────────────────────────────
const Footer = ({ t, accent, lang }) => (
  <footer className="footer">
    <div className="footer-top">
      <div className="footer-brand">
        <img src="assets/marip-logo.svg" alt="MARIP" className="footer-logo" />
        <div>
          <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '0.02em' }}>{t.brand}</div>
          <div className="footer-tag">{t.tagline}</div>
        </div>
      </div>
      <div className="footer-addr">
        {t.addrLines.map((line, i) => (
          <React.Fragment key={i}>{line}{i < t.addrLines.length - 1 && <br />}</React.Fragment>
        ))}
      </div>
    </div>

    <div className="footer-company">
      <div className="footer-company-head">
        <span className="eyebrow">— {t.companyInfoLabel} —</span>
        <a href="company/" className="footer-company-more">
          {t.companyInfoMore}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
      </div>
      <dl className="footer-company-list">
        {t.companyInfo.map((row, i) => (
          <div className="footer-company-row" key={i}>
            <dt>{row.k}</dt>
            <dd>{row.v}</dd>
          </div>
        ))}
      </dl>
    </div>

    <div className="footer-huge" style={{ color: accent }}>
      MARIP
      <span className="footer-huge-sub">—Make Ripples—</span>
    </div>

    <div className="footer-bot">
      <div className="footer-links">
        {t.footerLinks.map((l, i) => <a key={i} href={(t.footerLinkHrefs && t.footerLinkHrefs[i]) || '#'}>{l}</a>)}
      </div>
      <div className="footer-copy">
        © {new Date().getFullYear()} MARIP Inc. All rights reserved.
      </div>
    </div>
  </footer>
);

// ─── Mission / Vision / Value ──────────────────────────────────────────────
const MissionVisionValue = ({ t, accent }) => (
  <section className="section section-mvv" id="s3">
    <div className="section-head">
      <span className="eyebrow">{t.mvvEyebrow}</span>
      <h2 className="section-title">
        <SplitReveal text={"Mission.\nVision.\nValue."} stagger={0.02} />
      </h2>
    </div>

    {/* Mission */}
    <div className="mvv-block">
      <div className="mvv-label">
        <span className="mvv-tag" style={{ borderColor: accent, color: accent }}>{t.mission.label}</span>
        <div className="mvv-ripple">
          <svg viewBox="0 0 80 80">
            <circle cx="40" cy="40" r="3" fill={accent} />
            {[10, 18, 26, 34].map((r, k) => (
              <circle key={k} cx="40" cy="40" r={r} fill="none" stroke={accent} strokeWidth="0.6" opacity={0.8 - k * 0.18}
                style={{ transformOrigin: '40px 40px', animation: `whyPulse 3.2s ease-in-out infinite`, animationDelay: `${k * 0.25}s` }}/>
            ))}
          </svg>
        </div>
      </div>
      <div className="mvv-content">
        <h3 className="mvv-title" style={{ whiteSpace: 'pre-line' }}>{t.mission.t}</h3>
        <p className="mvv-desc">{t.mission.d}</p>
      </div>
    </div>

    {/* Vision */}
    <div className="mvv-block mvv-block--vision">
      <div className="mvv-label">
        <span className="mvv-tag" style={{ borderColor: accent, color: accent }}>{t.vision.label}</span>
      </div>
      <div className="mvv-content">
        <h3 className="mvv-title" style={{ whiteSpace: 'pre-line' }}>{t.vision.t}</h3>
      </div>
    </div>

    {/* Values */}
    <div className="mvv-values">
      <div className="mvv-values-head">
        <span className="mvv-tag" style={{ borderColor: accent, color: accent }}>{t.valuesLabel}</span>
        <span className="mvv-values-count">04 Principles</span>
      </div>
      <div className="value-grid">
        {t.values.map((v, i) => (
          <Reveal key={i} delay={i * 0.08}>
            <div className="value-card">
              <div className="value-num" style={{ color: accent }}>{v.n}</div>
              <h4 className="value-en" style={{ whiteSpace: 'pre-line' }}>{v.en}</h4>
              <div className="value-jp">「{v.jp}」</div>
              <p className="value-desc">{v.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { TopNav, Hero, MarqueeBand, Challenges, Services, ServiceThumb, WhyMarip, MissionVisionValue, News, FinalCTA, Footer });