@extends('layouts.app')
@section('css')
  main{padding-top:0}
  .hero{background:linear-gradient(160deg,#f1ebfb 0,#fbf3f1 60%,#f6f4fb 100%);padding:64px 0 54px;text-align:center}
  .hero h1{font-size:clamp(30px,5.4vw,50px);line-height:1.12;max-width:760px;margin:0 auto 14px;letter-spacing:-.02em}
  .hero h1 em{font-style:normal;color:var(--purple)}
  .hero p.lead{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:620px;margin:0 auto 26px}
  .hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .sec{padding:56px 0 0}
  .sec h2{font-size:clamp(22px,3.2vw,30px);text-align:center;margin:0 0 8px;letter-spacing:-.01em}
  .sec .sub{text-align:center;color:var(--muted);max-width:560px;margin:0 auto 28px}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .step b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--purple);margin-bottom:10px}
  .step h3{margin:0 0 4px;font-size:17px}
  .step p{margin:0;color:var(--muted);font-size:15px}
  .demos{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x proximity}
  .demo{flex:0 0 auto;scroll-snap-align:start;text-align:center}
  .demo .frame{width:258px;height:468px;overflow:hidden;border-radius:12px;box-shadow:0 8px 30px rgba(60,40,100,.18);background:#fff}
  .demo iframe{width:430px;height:780px;border:0;transform:scale(.6);transform-origin:0 0;pointer-events:none}
  .demo p{margin:10px 0 0;font-weight:700;font-size:14px}
  .feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
  .feat h3{margin:0 0 4px;font-size:16px}
  .feat p{margin:0;color:var(--muted);font-size:15px}
  .band{margin-top:56px;background:var(--purple);color:#fff;text-align:center;padding:46px 18px;border-radius:18px}
  .band h2{color:#fff;font-size:clamp(22px,3.4vw,32px)}
  .band p{margin:0 auto 20px;max-width:520px;opacity:.9}
  .band .btn{background:#fff;color:var(--purple)}
@endsection
@section('bare')
<section class="hero">
  <div class="wrap">
    <h1>Wedding invitations your guests will <em>love</em> — sent on WhatsApp</h1>
    <p class="lead">Pick a beautiful template, add your guests, and send each one a personal invitation link. See who opened it and who is coming — all in one place.</p>
    <div class="cta">
      @auth
        <a class="btn lg" href="{{ route('dashboard') }}">Go to my weddings</a>
      @else
        @if($open)<a class="btn lg" href="{{ route('register') }}">Create your invitation — free</a>@endif
        <a class="btn lg ghost" href="{{ route('login') }}">Log in</a>
      @endauth
    </div>
  </div>
</section>

<div class="wrap">
<section class="sec">
  <h2>How it works</h2>
  <p class="sub">From sign-up to the first invitation in a few minutes.</p>
  <div class="steps">
    <div class="card step"><b>1</b><h3>Design it</h3><p>Choose a template and type your names, date and venue. The preview updates as you type.</p></div>
    <div class="card step"><b>2</b><h3>Add your guests</h3><p>Add names and WhatsApp numbers one by one, or paste a whole list at once.</p></div>
    <div class="card step"><b>3</b><h3>Send &amp; track</h3><p>One tap opens WhatsApp with the message ready. Watch opens and replies arrive live.</p></div>
  </div>
</section>

<section class="sec">
  <h2>Templates</h2>
  <p class="sub">Every detail is yours to change — names, wording, language, colours.</p>
  <div class="demos">
    @foreach($themes as $t)
      <div class="demo">
        <div class="frame"><iframe src="{{ url('/demo/'.$t['id']) }}" loading="lazy" title="{{ $t['label'] }} template" tabindex="-1"></iframe></div>
        <p>{{ $t['label'] }}</p>
      </div>
    @endforeach
  </div>
</section>

<section class="sec">
  <h2>Everything for the big day</h2>
  <p class="sub">Simple for you, lovely for your guests.</p>
  <div class="feats">
    <div class="card feat"><h3>Personal link for every guest</h3><p>Each guest gets their own page with their name on it.</p></div>
    <div class="card feat"><h3>Send on WhatsApp</h3><p>No app to install — your guests already use it.</p></div>
    <div class="card feat"><h3>Replies &amp; head-count</h3><p>Guests accept or decline and say how many are coming.</p></div>
    <div class="card feat"><h3>English &amp; বাংলা</h3><p>Dates in English or Bangla, and every line of text is editable.</p></div>
    <div class="card feat"><h3>Multiple weddings</h3><p>Planning for family or clients? Keep each wedding separate.</p></div>
    <div class="card feat"><h3>Up to {{ $guestLimit }} guests each</h3><p>Plenty of room for a big celebration.</p></div>
  </div>
</section>

@if($open)
<section class="band">
  <h2>Ready to invite your guests?</h2>
  <p>Create your free account and have your first invitation ready today.</p>
  @auth<a class="btn lg" href="{{ route('dashboard') }}">Go to my weddings</a>@else<a class="btn lg" href="{{ route('register') }}">Get started — it's free</a>@endauth
</section>
@endif
</div>
@endsection