// Location, Rules, FAQ, Footer

const Location = ({ t }) => (
  <section className="section" id="location">
    <div className="container">
      <Reveal className="section-head">
        <span className="eyebrow-jp">{t.location.eyebrow}</span>
        <h2 className="h-section">{t.location.title}</h2>
        <p className="h-sub">{t.location.sub}</p>
      </Reveal>
      <div className="location-grid">
        <Reveal>
          <div className="map-frame">
            <iframe
              title="Map"
              src="https://maps.google.com/maps?q=35.262639,139.582861&z=16&hl=en&output=embed"
              style={{ width: "100%", height: "100%", border: 0, filter: "grayscale(0.18) contrast(0.96)" }}
              loading="lazy"
            />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <ul className="access-list">
            {t.location.access.map((a, i) => (
              <li key={i}>
                <span className="label">{a.l}</span>
                <span className="val">
                  {a.v}
                  {a.s && <small>{a.s}</small>}
                </span>
              </li>
            ))}
          </ul>
          <div className="attractions">
            <span className="eyebrow-jp" style={{ marginBottom: 12, display: "inline-block" }}>Nearby · 周辺</span>
            {t.location.attractions.map((p, i) => (
              <div key={i} className="attraction-row">
                <span className="attraction-num">{String(i+1).padStart(2,"0")}</span>
                <span className="attraction-name">{p.name}<small>{p.jp}</small></span>
                <span className="attraction-dist">{p.dist}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const Rules = ({ t }) => (
  <section className="section" style={{ background: "var(--sand-100)" }}>
    <div className="container">
      <Reveal className="section-head">
        <span className="eyebrow-jp">{t.rules.eyebrow}</span>
        <h2 className="h-section">{t.rules.title}</h2>
      </Reveal>
      <Reveal>
        <div className="rules-grid">
          {t.rules.items.map((r, i) => (
            <div className="rule" key={i}>
              <div className="rule-icon"><Icon name={r.icon} size={22} strokeWidth={1.4} /></div>
              <div className="rule-text">
                <strong>{r.name}</strong>
                <small>{r.sub}</small>
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

const FAQ = ({ t }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="container">
        <Reveal className="section-head" style={{ textAlign: "center", margin: "0 auto 64px" }}>
          <span className="eyebrow-jp">{t.faq.eyebrow}</span>
          <h2 className="h-section">{t.faq.title}</h2>
        </Reveal>
        <Reveal>
          <div className="faq-list">
            {t.faq.items.map((it, i) => (
              <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="icon-plus"><Icon name="plus" size={14} strokeWidth={1.6} /></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const Footer = ({ t, lang, setLang }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="brand brand-mark" style={{ marginBottom: 20 }}>
            <span className="arch" style={{ borderColor: "var(--sand-0)" }} />
            <span style={{ color: "var(--sand-0)" }}>Rayful</span>
          </div>
          <p style={{ maxWidth: 280 }}>{t.footer.tag}</p>
          <div className="lang-toggle" style={{ marginTop: 24, background: "rgba(255,255,255,0.06)", borderColor: "rgba(255,255,255,0.12)" }}>
            {["en","ja","zh"].map(l => (
              <button key={l} className={lang === l ? "active" : ""} onClick={() => setLang(l)}>
                {l === "en" ? "EN" : l === "ja" ? "JA" : "中"}
              </button>
            ))}
          </div>
        </div>
        <div>
          <h4>{t.footer.reach}</h4>
          <p style={{ whiteSpace: "pre-line" }}>{t.footer.addr}</p>
          <p>hello@rayful.jp<br/>+81 (0)46 000 0000</p>
        </div>
        <div>
          <h4>{t.footer.explore}</h4>
          <ul>
            {t.footer.links.explore.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}
          </ul>
        </div>
        <div>
          <h4>{t.footer.legal}</h4>
          <ul>
            {t.footer.links.legal.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}
          </ul>
          <h4 style={{ marginTop: 24 }}>SNS</h4>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Note</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>{t.footer.copyright}</span>
        <span>RAYFUL · HAYAMA · KANAGAWA · JAPAN</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Location, Rules, FAQ, Footer });