// ArcAid — Tesla insurance, warm editorial prototype

const NEWS_ITEMS = [
  {
    date: "News / 2026.08",
    tag: "News",
    title: "契約者向け ArcAidアプリを開発中です",
    pop: true,
  },
  {
    date: "Movie / 06:14",
    tag: "Movie",
    title: "プレミアム補償って、結局なにが違うの？",
  },
  {
    date: "Movie / 08:32",
    tag: "Movie",
    title: "テスラオーナーが知るべき、車両保険の選び方",
  },
];

const MOVIES = [
  {
    meta: "Episode 01  /  08:32",
    title: "テスラオーナーが知るべき、車両保険の選び方",
  },
  {
    meta: "Episode 02  /  06:14",
    title: "プレミアム補償って、結局なにが違うの？",
  },
  {
    meta: "Story  /  5 min",
    title: "ネット型と代理店型の違い — テスラオーナーが知っておきたい3つの観点",
  },
];

const STRENGTHS = [
  {
    number: "01",
    icon: "car",
    title: "全モデル、車両保険可",
    body: "Model S / 3 / X / Y — 新車・中古車を問わず、車両価値に応じた保険金額の設定が可能です。",
  },
  {
    number: "02",
    icon: "wrench",
    title: "テスラを知る修理工場",
    body: "配線、オートパイロット、純正部品に精通した認定修理工場ネットワークへ直接ハンドオフ。",
  },
  {
    number: "03",
    icon: "clock",
    title: "24時間365日、いつでも",
    body: "夜間も休日も、事故対応窓口は止まりません。レッカー距離も無制限です。",
  },
];

const COVERAGE_ITEMS = [
  {
    number: "01",
    icon: "walker",
    title: "対人賠償責任保険",
    en: "Bodily injury liability",
    body: "歩行者や他車のドライバーなど、他人を死傷させてしまった場合の損害を無制限で補償します。テスラの加速性能を踏まえた手厚い設計。",
  },
  {
    number: "02",
    icon: "home",
    title: "対物賠償責任保険",
    en: "Property damage liability",
    body: "他人の財物（自動車、建物など）を破損した場合の修理費用をお支払いします。高額な修理費用になる車両との事故にも対応し、示談交渉もサポートします。",
  },
  {
    number: "03",
    icon: "heart",
    title: "人身傷害保険",
    en: "Personal injury cover",
    body: "ご自身および搭乗者の方が事故により死傷した場合、過失割合にかかわらず実損害額を補償します。",
  },
  {
    number: "04",
    icon: "car",
    title: "車両保険",
    en: "Vehicle cover",
    body: "あなたのテスラ自体の損害を補償。ArcAidが取り扱う保険会社は全モデル・新車・中古車問わず付帯が可能です。",
  },
  {
    number: "05",
    icon: "spark",
    title: "プレミアム補償",
    en: "Premium cover — included",
    body: "等級に影響しない、テスラオーナー専用の独自補償。ガラス破損・いたずら・落書きを無償でカバー。",
    premium: true,
  },
];

const VOICES = [
  {
    name: "H.S さん",
    model: "Model Y",
    initials: "HS",
    color: "#0c4a30",
    quote:
      "飛び石でフロントガラスにヒビが入った時、等級を気にせず交換できたのが本当に助かりました。テスラに詳しい担当者だから、話がとにかく早い。",
  },
  {
    name: "K.M さん",
    model: "Model 3",
    initials: "KM",
    color: "#13402d",
    quote:
      "ネット保険と迷いましたが、納車前から相談に乗ってくれて安心でした。テスラ特有のリスクをちゃんと分かってくれる代理店は貴重です。",
  },
  {
    name: "T.A さん",
    model: "Model S",
    initials: "TA",
    color: "#149a48",
    quote:
      "地方在住で近くにテスラに強い工場がなく不安でしたが、提携工場まで手配してくれました。アークエイドがあるから、テスラに踏み切れた。",
  },
];

function CountValue({ value, suffix = "", prefix = "" }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(0);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setShown(value);
      return;
    }
    let raf = 0;
    const io = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      io.disconnect();
      const start = performance.now();
      const tick = (now) => {
        const t = Math.min(1, (now - start) / 1100);
        setShown(value * (1 - Math.pow(1 - t, 3)));
        if (t < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    }, { threshold: 0.45 });
    io.observe(node);
    return () => {
      io.disconnect();
      cancelAnimationFrame(raf);
    };
  }, [value]);

  return (
    <span ref={ref}>
      {prefix}
      {Math.round(shown).toLocaleString("en-US")}
      {suffix}
    </span>
  );
}

function useScrollReveal() {
  React.useEffect(() => {
    document.documentElement.classList.add("js-ready");
    const nodes = Array.from(document.querySelectorAll("[data-reveal]"));
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      nodes.forEach((node) => node.classList.add("is-visible"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add("is-visible");
        io.unobserve(entry.target);
      });
    }, { threshold: 0.14, rootMargin: "0px 0px -6% 0px" });
    nodes.forEach((node) => io.observe(node));
    return () => io.disconnect();
  }, []);
}

function Icon({ name, size = 22 }) {
  const assets = {
    car: "car.svg",
    wrench: "wrench.svg",
    clock: "clock-24.svg",
    people: "people.svg",
    walker: "walker.svg",
    tow: "tow-truck.svg",
    home: "home.svg",
    heart: "health.svg",
    spark: "spark.svg",
    check: "check.svg",
  };
  const file = assets[name];
  if (!file) return null;
  const url = `assets/icons/core-remix/${file}`;
  const style = {
    width: size,
    height: size,
    WebkitMaskImage: `url("${url}")`,
    maskImage: `url("${url}")`,
  };
  return (
    <span
      className="ic streamline-icon"
      style={style}
      aria-hidden="true"
    ></span>
  );
}

function Logo({ light = false }) {
  return (
    <a href="index.html" className="logo" aria-label="ArcAid トップページ">
      <img src={light ? "assets/arcaid-white.svg" : "assets/arcaid-ink.svg"} alt="" />
    </a>
  );
}

function Nav({ light = false }) {
  const [open, setOpen] = React.useState(false);
  const [mini, setMini] = React.useState(false);

  React.useEffect(() => {
    const onKey = (event) => {
      if (event.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    document.documentElement.classList.toggle("menu-open", open);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.documentElement.classList.remove("menu-open");
    };
  }, [open]);

  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        setMini(window.scrollY > 72);
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  const links = [
    ["#strengths", "強み"],
    ["#coverage", "補償"],
    ["#voices", "オーナーの声"],
    ["#guild", "ギルド"],
    ["#app", "アプリ"],
    ["about.html", "会社情報"],
    ["careers.html", "採用"],
  ];

  const overlay = light && !mini && !open;

  return (
    <>
      <a className="skip-link" href="#main-content">本文へ移動</a>
      <header className={"site-bar" + (overlay ? " is-overlay" : "") + (mini || open ? " is-mini" : "")}>
      <nav className={"nav" + (overlay ? " nav-light" : "")} aria-label="メインナビゲーション">
        <Logo light={overlay} />
        <div className="nav-links">
          {links.map(([href, label]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </div>
        <div className="nav-right">
          <a href="consult.html" className="nav-consult">購入前相談</a>
          <a href="quote.html" className="btn btn-primary">無料で見積もる</a>
          <button
            className="menu-toggle"
            type="button"
            aria-expanded={open}
            aria-controls="home-menu"
            aria-label={open ? "メニューを閉じる" : "メニューを開く"}
            onClick={() => setOpen((value) => !value)}
          >
            <span></span><span></span>
          </button>
        </div>
      </nav>
      <div className="mobile-menu" id="home-menu" aria-hidden={!open}>
        <nav className="mobile-menu-links" aria-label="モバイルナビゲーション">
          {links.map(([href, label]) => (
            <a className="mobile-menu-link" key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
        </nav>
        <div className="mobile-menu-actions">
          <a href="quote.html" className="btn btn-primary">無料で見積もる</a>
          <a href="consult.html" className="mobile-consult">購入前相談を予約する <span aria-hidden="true">→</span></a>
        </div>
        <p className="mobile-menu-note">テスラ専用 自動車保険代理店</p>
      </div>
      </header>
      <div className="nav-slot" aria-hidden="true"></div>
    </>
  );
}

function HeroCopy() {
  return (
    <div className="hero-copy">
      <div className="hero-eyebrow">テスラ専用 自動車保険代理店</div>
      <h1 className="hero-title">
        <span className="line">テスラのある<span className="hero-br">毎日に、</span></span>
        <span className="accent">もっと安心を</span>
      </h1>
      <p className="hero-tag">
        アークエイドは、テスラオーナー自身がつくった代理店型自動車保険。
        テスラ特有のリスクに、オーナー目線で寄り添います。
      </p>
      <div className="hero-cta">
        <a href="quote.html" className="btn btn-primary">無料で見積もる</a>
        <a href="#strengths" className="btn btn-ghost-dark">強みを見る →</a>
      </div>
    </div>
  );
}

function Hero() {
  const bgRef = React.useRef(null);

  React.useEffect(() => {
    const el = bgRef.current;
    if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = Math.min(window.scrollY, 720);
        el.style.transform = `translate3d(0, ${y * 0.28}px, 0)`;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return (
    <section className="hero full">
      <div className="hero-bg" ref={bgRef} aria-hidden="true">
        <video
          src="https://arcaid.co.jp/videos/video01.mp4"
          poster="assets/illustrations/hero-owner.webp"
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
        ></video>
      </div>
      <div className="hero-scrim"></div>
      <div className="hero-grain"></div>
      <Nav light />
      <div className="hero-inner">
        <HeroCopy />
      </div>
      <Marquee />
    </section>
  );
}

function Marquee() {
  const track = NEWS_ITEMS.map((item) => (
    <span className="marquee-item" key={item.title}>
      <span className="mq-date">{item.date}</span>
      <span className="mq-tag">{item.tag}</span>
      <span className="mq-title">{item.title}</span>
    </span>
  ));

  return (
    <div className="marquee">
      <div className="marquee-plate">Latest</div>
      <div className="marquee-strip">
        <div className="marquee-track">{track}</div>
        <div className="marquee-track" aria-hidden="true">{track}</div>
      </div>
    </div>
  );
}

function Stats() {
  const items = [
    { icon: "clock", value: 24, suffix: "h", label: "365日、事故対応窓口" },
    { icon: "car", text: "すべてのテスラ", label: "Model S・3・X・Yに対応" },
    { icon: "tow", text: "無制限", label: "レッカー移動距離" },
  ];
  return (
    <section className="section stats-section">
      <div className="section-tight">
        <div className="stats-hero" data-reveal>
          <div className="stats-hero-num">
            <CountValue value={5000} suffix="+" />
          </div>
          <div className="stats-hero-copy">
            <b>ご契約</b>
          </div>
        </div>
        <div className="stats-rail">
          {items.map((item, index) => (
            <div className="stat" data-reveal={String(index + 2)} key={item.label}>
              <span className="stat-ic"><Icon name={item.icon} size={22} /></span>
              <div>
                <div className={"stat-num" + (item.text ? " is-text" : "")}>
                  {item.text || <CountValue value={item.value} suffix={item.suffix} />}
                </div>
                <div className="stat-label">{item.label}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Editorial() {
  return (
    <section className="editorial">
      <div className="editorial-panel photo" data-reveal>
        <div className="ed-bg">
          <img
            src="assets/illustrations/support-advisor.webp"
            width="1536"
            height="1024"
            alt="テスラオーナーと保険担当者が向き合って相談している様子"
            loading="lazy"
            decoding="async"
          />
        </div>
        <div className="ed-scrim"></div>
        <div className="eyebrow">Why ArcAid</div>
        <h2>わからないことを、<br />わかる人に聞ける</h2>
        <p>
          ネット完結のダイレクト保険にはない、人による伴走。
          テスラに精通した担当者が、加入前のご相談から万一の事故対応まで、一貫してサポートします。
        </p>
      </div>
    </section>
  );
}

function Strengths() {
  return (
    <section id="strengths" className="section mist">
      <div className="section-tight">
        <div className="head">
          <div>
            <div className="eyebrow">3 reasons to choose us</div>
            <h2>テスラのために、できること</h2>
          </div>
          <a href="#coverage" className="btn btn-ghost-dark">補償内容を見る</a>
        </div>
        <div className="features">
          {STRENGTHS.map((item) => (
            <article className="feature" data-reveal={item.number.replace(/^0/, "")} key={item.number}>
              <div>
                <div className="feature-ic"><Icon name={item.icon} size={26} /></div>
                <div className="feature-num">{item.number}</div>
                <h3 className="feature-title">{item.title}</h3>
                <p className="feature-body">{item.body}</p>
              </div>
              <span className="feature-arrow">詳しく見る →</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Premium() {
  const plates = [
    {
      image: "assets/illustrations/coverage-glass.webp",
      tag: "Glass damage",
      title: "窓ガラス破損損害",
      desc: "走行中の飛び石によるガラス破損やキズなど、ガラス単独の損傷が対象。",
      amount: "¥70,000",
      note: "上限 / 自己負担額 ¥1,000",
    },
    {
      image: "assets/illustrations/coverage-vandalism.webp",
      tag: "Vandalism & graffiti",
      title: "いたずら・落書き損害",
      desc: "第三者による人為的ないたずらや落書きが対象。コイン、釘、ペンキ、スプレー等を含みます。",
      amount: "¥30,000",
      note: "上限 / 自己負担額 ¥1,000",
    },
  ];

  return (
    <section id="premium" className="section">
      <div className="section-tight">
        <div className="head">
          <div>
            <div className="eyebrow">ArcAid premium cover</div>
            <h2>追加保険料なし<br />等級にも影響しない、2つの独自補償</h2>
          </div>
        </div>
        <p className="premium-summary">
          追加保険料 <b>¥0</b>ですべてのプランに標準付帯。使っても翌年の等級は据え置き、
          提携工場で純正相当ガラスの安心修理に対応します。
        </p>
        <div className="premium-promises">
          <div className="pp">
            <span className="pp-ic"><Icon name="check" size={22} /></span>
            <div><b>追加保険料 ¥0</b><span>すべてのプランに標準付帯</span></div>
          </div>
          <div className="pp">
            <span className="pp-ic"><Icon name="spark" size={22} /></span>
            <div><b>翌年の等級 影響なし</b><span>使っても等級は据え置き</span></div>
          </div>
          <div className="pp">
            <span className="pp-ic"><Icon name="wrench" size={22} /></span>
            <div><b>提携工場</b><span>純正相当ガラスの安心修理</span></div>
          </div>
        </div>
        <div className="plates">
          {plates.map((plate) => (
            <article className="plate" data-reveal key={plate.title}>
              <div
                className="plate-photo"
                style={{ backgroundImage: `url(${plate.image})` }}
                role="img"
                aria-label={plate.title}
              ></div>
              <div className="plate-body">
                <div className="plate-tag">{plate.tag}</div>
                <h3 className="plate-title">{plate.title}</h3>
                <p className="plate-desc">{plate.desc}</p>
                <div className="plate-foot">
                  <div className="plate-amount">{plate.amount}</div>
                  <div className="plate-note">{plate.note}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
        <p className="form-note" style={{ marginTop: 22 }}>
          ※ 保険期間中、保険年度ごとに上記補償のいずれか1回が限度です。事故発生時にArcAidでご加入の自動車保険が有効であり、提携修理工場への入庫が条件です。金額は税込です。
        </p>
      </div>
    </section>
  );
}

function Coverage() {
  const [openIndex, setOpenIndex] = React.useState(0);

  return (
    <section id="coverage" className="section mist">
      <div className="section-tight">
        <div className="cov-head">
          <div>
            <div className="eyebrow">Coverage</div>
            <h2>5つの、基本補償</h2>
          </div>
          <p>
            ArcAidの自動車保険は、充実した基本補償に加え、テスラオーナー向けに設計された独自のプレミアム補償を標準装備。
            テスラに特化した24時間365日のサポート体制と、全国のテスラ専門修理ネットワークを通じて、確かな安心をお届けします。
          </p>
        </div>
        <div className="acc-list" data-reveal>
          {COVERAGE_ITEMS.map((item, index) => {
            const open = openIndex === index;
            const panelId = `coverage-panel-${index}`;
            const buttonId = `coverage-button-${index}`;
            return (
              <article
                className={"acc-item" + (open ? " open" : "") + (item.premium ? " acc-premium" : "")}
                key={item.number}
              >
                <h3>
                  <button
                    id={buttonId}
                    className="acc-head"
                    type="button"
                    aria-expanded={open}
                    aria-controls={panelId}
                    onClick={() => setOpenIndex(open ? -1 : index)}
                  >
                    <span className="acc-lead">
                      <span className="acc-ic"><Icon name={item.icon} size={20} /></span>
                      <span className="acc-num">{item.number}</span>
                    </span>
                    <span>
                      <span className="acc-title">
                        {item.title}
                        {item.premium && <span className="acc-badge">標準付帯 ¥0</span>}
                      </span>
                      <span className="acc-en">{item.en}</span>
                    </span>
                    <span className="acc-toggle" aria-hidden="true"></span>
                  </button>
                </h3>
                <div
                  id={panelId}
                  className="acc-body"
                  role="region"
                  aria-labelledby={buttonId}
                  hidden={!open}
                >
                  <div className="acc-body-inner">{item.body}</div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Voices() {
  return (
    <section id="voices" className="section">
      <div className="section-tight">
        <div className="head">
          <div>
            <div className="eyebrow">Owner voices</div>
            <h2>テスラオーナーが、語る</h2>
          </div>
          <a href="#cta" className="btn btn-ghost-dark">あなたの声も聞かせて</a>
        </div>
        <p className="form-note" style={{ margin: "-24px 0 28px" }}>Content sample / 公開時差し替え</p>
        <div className="voices">
          {VOICES.map((voice) => (
            <figure className="voice" data-reveal key={voice.name}>
              <span className="voice-q" aria-hidden="true">“</span>
              <blockquote className="voice-text">{voice.quote}</blockquote>
              <figcaption className="voice-by">
                <span className="voice-av" style={{ background: voice.color }}>{voice.initials}</span>
                <span>
                  <span className="voice-name">{voice.name}</span>
                  <span className="voice-model"><Icon name="car" size={14} />{voice.model}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function QuietBlock() {
  return (
    <section className="quiet">
      <p className="quiet-num" data-reveal><CountValue value={5000} suffix="+" /></p>
      <p className="quiet-cap"><strong>5,000+ 全国突破</strong></p>
      <div className="quiet-stats">
        <div className="qs" data-reveal="1">
          <div className="qs-num"><CountValue value={180} prefix="+" suffix="%" /></div>
          <div className="qs-label">前年比</div>
        </div>
        <div className="qs" data-reveal="2">
          <div className="qs-num"><CountValue value={96} suffix="%" /></div>
          <div className="qs-label">継続意向</div>
        </div>
        <div className="qs" data-reveal="3">
          <div className="qs-num"><CountValue value={120} /></div>
          <div className="qs-label">提携拠点</div>
        </div>
      </div>
    </section>
  );
}

function Guild() {
  return (
    <section id="guild" className="section">
      <div className="section-tight">
        <div className="guild" data-reveal>
          <div className="guild-copy">
            <div className="eyebrow">ArcAid Owners Guild</div>
            <h2>テスラオーナーが集う、ギルド</h2>
            <p>
              ArcAidは、保険会社ではなくオーナーのコミュニティ。
              現役オーナー同士が知見を持ち寄り、試乗会やオフ会で交流し、補償づくりにも参加する。
              「オーナーが、オーナーのために」を支える仲間の輪です。
            </p>
            <div className="guild-feats">
              <span className="gf"><Icon name="people" size={16} />オーナー掲示板</span>
              <span className="gf"><Icon name="spark" size={16} />限定コラム</span>
              <span className="gf"><Icon name="car" size={16} />試乗会・オフ会</span>
            </div>
            <div className="guild-stats">
              <div>
                <div className="guild-stat-num">5,000+</div>
                <div className="guild-stat-label">オーナーの輪</div>
              </div>
              <div>
                <div className="guild-stat-num">24h</div>
                <div className="guild-stat-label">つながる窓口</div>
              </div>
            </div>
            <a href="guild.html" className="btn btn-white">ギルドを見る →</a>
          </div>
          <figure className="guild-visual">
            <img
              className="guild-illust"
              src="assets/illustrations/guild-community.webp"
              width="1536"
              height="1024"
              alt="電気自動車のオーナーたちが集まり、情報交換している様子"
              loading="lazy"
              decoding="async"
            />
          </figure>
        </div>
      </div>
    </section>
  );
}

function AppPhone({ src, alt, side }) {
  return (
    <figure className={"app-phone" + (side ? " is-side is-" + side : " is-center")}>
      <img
        src={src}
        width="390"
        height="844"
        alt={alt}
        loading="lazy"
        decoding="async"
      />
    </figure>
  );
}

function AppPromo() {
  return (
    <section id="app" className="section">
      <div className="section-tight">
        <div className="app-block" data-reveal>
          <div className="app-copy">
            <div className="app-kicker">
              <div className="eyebrow">ArcAid App</div>
              <ul className="app-status" aria-label="アプリの状態">
                <li>開発中</li>
                <li>テスラAPI接続可能</li>
              </ul>
            </div>
            <h2>コミュニティも、もしもの時も、アプリで</h2>
            <p>
              アプリはテスラAPIと接続可能で、ただいま開発中です。オーナー掲示板と限定コラム、車両の状態、事故が起きたときの手順まで、テスラのある毎日を一つの場所にまとめます。
            </p>
            <div className="app-feats">
              <div className="app-feat">
                <Icon name="people" size={22} />
                <div>
                  <b>コミュニティ</b>
                  <span>新着トピックと固定トピック。オーナー同士の知見がそのまま残ります</span>
                </div>
              </div>
              <div className="app-feat">
                <Icon name="car" size={22} />
                <div>
                  <b>マイカー</b>
                  <span>テスラAPIで車両と連携。保険の確認、近くの修理工場</span>
                </div>
              </div>
              <div className="app-feat">
                <Icon name="clock" size={22} />
                <div>
                  <b>事故対応</b>
                  <span>報告、緊急連絡、上から順に進める対応の流れ</span>
                </div>
              </div>
            </div>
          </div>
          <div className="app-phones">
            <AppPhone
              src="assets/app/screen-mycar.png"
              alt="マイカー画面。車両の接続状態と、事故が起きたときの入口"
              side="left"
            />
            <AppPhone
              src="assets/app/screen-home.png"
              alt="ホーム画面。コミュニティの新着と固定トピック"
            />
            <AppPhone
              src="assets/app/screen-accident.png"
              alt="事故対応画面。報告の完了と緊急連絡先"
              side="right"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function News() {
  return (
    <section className="section mist">
      <div className="section-tight">
        <div className="head">
          <div>
            <div className="eyebrow">News</div>
            <h2>お知らせ</h2>
          </div>
          <a href="#" className="news-more">すべて見る →</a>
        </div>
        <div className="news-grid">
          {NEWS_ITEMS.map((item) => (
            <article className="news-card" data-reveal key={item.title}>
              <span className={"news-tag" + (item.pop ? " pop" : "")}>{item.tag}</span>
              <h3 className="news-title">{item.title}</h3>
              <div className="news-date">{item.date}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Movies() {
  return (
    <section className="section movies">
      <div className="section-tight">
        <div className="eyebrow">Learn with ArcAid</div>
        <h2>動画で、わかる</h2>
        <p className="movies-intro">
          保険会社の言葉ではなく、オーナーの言葉で。テスラ特有のリスクや事故対応を、現役オーナーが解説します。
        </p>
        <div className="movie-grid">
          {MOVIES.map((item) => (
            <article className="movie-card" data-reveal key={item.title}>
              <div className="movie-thumb" aria-hidden="true"><span className="movie-play"></span></div>
              <div>
                <div className="movie-meta">{item.meta}</div>
                <h3 className="movie-title">{item.title}</h3>
              </div>
            </article>
          ))}
        </div>
        <p style={{ marginTop: 28 }}>
          <a href="#" className="news-more">すべてのエピソード →</a>
        </p>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="cta" className="cta">
      <div className="cta-inner" data-reveal>
        <div className="cta-eyebrow">Ready when you are</div>
        <h2>テスラのある毎日に、安心を</h2>
        <p>ダイレクト保険では届かない安心を、テスラのためだけに。</p>
        <div className="cta-paths">
          <article className="cta-path">
            <div className="cta-path-label">01 / Quick</div>
            <div className="cta-path-title">かんたん見積もり</div>
            <p>必要事項の入力は約1分。いまの保険料との比較も、その場で。</p>
            <a href="quote.html" className="btn btn-primary">無料で見積もる</a>
          </article>
          <article className="cta-path">
            <div className="cta-path-label">02 / Talk</div>
            <div className="cta-path-title">購入前相談</div>
            <p>テスラに詳しい担当者が、30〜60分であなたの疑問にお答えします。納車前でもOK。</p>
            <a href="consult.html" className="btn btn-ghost">相談を予約する</a>
          </article>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="section-tight">
        <div className="footer-lead">
          <div>
            <div className="footer-logo"><arcaid-reveal></arcaid-reveal></div>
            <div className="footer-tagline">
              <span className="t1">Tesla Insurance</span>
              <span className="t2">Designed by Owners, for Owners.</span>
            </div>
          </div>
          <p>
            <span>テスラを知る人に相談できる。</span>
            <span>その安心を、毎日のそばに。</span>
          </p>
        </div>
        <div className="footer-grid">
          <div>
            <p className="footer-tag">テスラオーナーが、テスラオーナーのためにつくった代理店型自動車保険。</p>
          </div>
          <div>
            <h4>補償について</h4>
            <a href="#coverage">基本補償</a>
            <a href="#premium">プレミアム補償</a>
            <a href="#strengths">3つの強み</a>
            <a href="#voices">オーナーの声</a>
            <a href="#app">ArcAidアプリ</a>
          </div>
          <div>
            <h4>会社情報</h4>
            <a href="about.html">私たちについて</a>
            <a href="careers.html">採用情報</a>
            <a href="contact.html">お問い合わせ</a>
          </div>
          <div>
            <h4>規約・方針</h4>
            <a href="#">利用規約</a>
            <a href="#">プライバシーポリシー</a>
            <a href="#">勧誘方針</a>
            <a href="#">反社会的勢力に対する方針</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 ArcAid Inc.</div>
          <div>承認番号：B25-201744（使用期限 2027/5/31）</div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  useScrollReveal();
  return (
    <div>
      <Hero />
      <main id="main-content">
        <Stats />
        <Editorial />
        <Strengths />
        <Premium />
        <Coverage />
        <Voices />
        <QuietBlock />
        <Guild />
        <AppPromo />
        <News />
        <Movies />
        <CTA />
      </main>
      <Footer />
    </div>
  );
}

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