/* global React, ReactDOM, PageNav, PageFooter, PageCTA, useAppTweaks, AppTweaks */

/* ───── Icons ───────────────────────────────────────────────────────── */

const IconCamera = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <path d="M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z" stroke="currentColor" strokeWidth="1.5"/>
    <circle cx="12" cy="13" r="3.5" stroke="currentColor" strokeWidth="1.5"/>
  </svg>
);
const IconWide = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <path d="M3 8L7 12L3 16M21 8L17 12L21 16M9 12H15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const IconLight = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3 11.2V17h6v-2.8A6 6 0 0 0 12 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
  </svg>
);
const IconNoP = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/>
    <path d="M5.5 5.5l13 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);
const IconFan = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="2" stroke="currentColor" strokeWidth="1.5"/>
    <path d="M12 4c-3 0-4 3 0 7M12 20c3 0 4-3 0-7M4 12c0-3 3-4 7 0M20 12c0 3-3 4-7 0" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

const IconKitchen = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
    <rect x="3" y="6" width="18" height="14" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
    <circle cx="8" cy="13" r="2" stroke="currentColor" strokeWidth="1.4"/>
    <circle cx="16" cy="13" r="2" stroke="currentColor" strokeWidth="1.4"/>
  </svg>
);
const IconBath = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
    <path d="M3 12h18v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3Z" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M7 12V7a2 2 0 0 1 2-2h1" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M5 18v2M19 18v2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);
const IconLiving = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
    <path d="M3 12c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v5H3v-5Z" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M5 17v2M19 17v2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    <path d="M5 10V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2" stroke="currentColor" strokeWidth="1.4"/>
  </svg>
);
const IconBed = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
    <path d="M3 18v-7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M3 14h18M3 18v2M21 18v2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    <circle cx="8" cy="11.5" r="1.5" fill="currentColor"/>
  </svg>
);
const IconHouse = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
    <path d="M3 11l9-7 9 7v9H3v-9Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
    <path d="M9 20v-6h6v6" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
  </svg>
);

/* Fix-card icons — small, conceptual, not literal diagrams */
const FixColor = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <rect x="4" y="4" width="11" height="11" rx="2" fill="oklch(0.65 0.16 80)"/>
    <rect x="17" y="17" width="11" height="11" rx="2" fill="oklch(0.96 0.01 70)" stroke="currentColor" strokeWidth="0.7"/>
    <path d="M11 16L21 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);
const FixVertical = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <path d="M8 6L12 26" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity="0.4"/>
    <path d="M22 6L22 26" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M14 17L20 17" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
  </svg>
);
const FixLens = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <path d="M5 16C5 16 9 8 16 8C23 8 27 16 27 16" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity="0.4"/>
    <path d="M5 22C5 22 9 22 16 22C23 22 27 22 27 22" stroke="var(--accent)" strokeWidth="1.7" strokeLinecap="round"/>
  </svg>
);
const FixHighlight = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <rect x="4" y="6" width="9" height="20" rx="1" fill="oklch(0.18 0.01 60)"/>
    <rect x="13" y="6" width="9" height="20" rx="1" fill="oklch(0.55 0.05 60)"/>
    <rect x="22" y="6" width="6" height="20" rx="1" fill="oklch(0.95 0.02 70)" stroke="currentColor" strokeWidth="0.7"/>
  </svg>
);
const FixSky = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <defs>
      <linearGradient id="skyG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="oklch(0.78 0.08 230)"/>
        <stop offset="1" stopColor="oklch(0.92 0.03 230)"/>
      </linearGradient>
    </defs>
    <rect x="4" y="4" width="24" height="20" rx="2" fill="url(#skyG)"/>
    <path d="M4 22C8 18 12 22 16 20C20 18 24 22 28 22V24H4V22Z" fill="oklch(0.45 0.05 140)"/>
  </svg>
);
const FixClarity = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <circle cx="11" cy="16" r="6" fill="currentColor" opacity="0.18"/>
    <circle cx="11" cy="16" r="6" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/>
    <circle cx="22" cy="16" r="5" stroke="var(--accent)" strokeWidth="1.6"/>
    <circle cx="22" cy="16" r="2" fill="var(--accent)"/>
  </svg>
);

/* ───── Data ────────────────────────────────────────────────────────── */

const HERO_THUMBS = [
  { src: "gallery-assets-optimized/Kitchen%201%20-%20After.webp",   room: "Kitchen" },
  { src: "gallery-assets-optimized/Bathroom%201%20-%20After.webp",  room: "Bath" },
  { src: "gallery-assets-optimized/Bedroom%201%20-%20After.webp",   room: "Bedroom" },
  { src: "gallery-assets-optimized/Exterior%201%20-%20After.webp",  room: "Exterior" }
];

const GOLDEN_RULES = [
  { kind: "do",   icon: IconCamera, n: "01", title: "Shoot at chest level",
    body: "Set the camera at 4–5 feet. Eye-level shots make ceilings feel low; shooting from the chest makes rooms feel expansive and balanced." },
  { kind: "do",   icon: IconWide,   n: "02", title: "Keep it wide — but real",
    body: "Aim for a wide view to show the layout, but avoid \"ultra-wide\" or panoramas that make a guest bedroom look like a gymnasium. Trust > novelty." },
  { kind: "do",   icon: IconLight,  n: "03", title: "Turn on every light",
    body: "Even in broad daylight, lamps and under-cabinet LEDs add warmth, depth, and a sense of \"home.\" Mixed lighting we can fix; total darkness we can't." },
  { kind: "dont", icon: IconNoP,    n: "04", title: "Avoid the Four P's",
    body: "No People, Pets, Pictures (personal family photos), or Property branding (agent logos, watermarks). MLS rules and buyer-distraction reasons." },
  { kind: "dont", icon: IconFan,    n: "05", title: "Turn off ceiling fans",
    body: "Fans on = motion blur in the blades and distracting shadows on the ceiling. There's no recovering from a blurred fan in post." }
];

const SHOT_INVENTORY = [
  { room: "Exterior front",  count: "2–4", focus: "The hero shot. Clean (no cars, trash cans). Best taken during golden hour." },
  { room: "Kitchen",         count: "3–5", focus: "Top priority. Show the work triangle (fridge / stove / sink). Highlight backsplash and appliances." },
  { room: "Living room",     count: "2–3", focus: "Show flow into other rooms. Capture architectural features like fireplaces or built-ins." },
  { room: "Primary bedroom", count: "2",   focus: "Emphasize scale and floor space. Shoot from the entrance and from the opposite corner." },
  { room: "Bathrooms",       count: "1–2", focus: "Toilet lids closed. Avoid mirror reflections. Focus on clean tile and vanity space." },
  { room: "Backyard",        count: "2–4", focus: "Treat as an \"outdoor living room.\" Highlight decks, patios, landscaping." },
  { room: "Secondary rooms", count: "1 ea", focus: "One clean shot to prove versatility (guest room, home office, nursery)." }
];

const CHECKLIST = [
  { room: "Kitchen",      icon: IconKitchen, items: [
      "Remove all small appliances (toaster, blender, coffee maker)",
      "Hide sponges, dish soap, paper towel rolls",
      "Pro tip: a single bowl of fresh citrus adds a pop of color"
    ]},
  { room: "Bathrooms",    icon: IconBath, items: [
      "Hide all toothbrushes, razors, shampoo bottles",
      "Hang fresh, neutral-colored towels",
      "Close every toilet lid, every time"
    ]},
  { room: "Living areas", icon: IconLiving, items: [
      "Hide visual noise: power cords, remotes, game consoles",
      "Move trash cans out of frame",
      "Pull blinds open evenly across all windows"
    ]},
  { room: "Bedrooms",     icon: IconBed, items: [
      "Smooth all bedding and fluff the pillows",
      "Clear nightstands of everything except a lamp",
      "Close closet doors unless you're showing storage"
    ]},
  { room: "Exterior",     icon: IconHouse, items: [
      "Move vehicles away from the house — both sides of the street",
      "Coil garden hoses, hide pet bowls and toys",
      "Mow the lawn and edge the walkway the day before"
    ]}
];

const FIXES = [
  { icon: FixColor,     title: "Color cast",          body: "Tungsten lamps + daylight windows mix to a yellow-green tint. We pull whites back to white." },
  { icon: FixVertical,  title: "Vertical correction", body: "Phones held by humans never level. We straighten the verticals so walls look like walls." },
  { icon: FixLens,      title: "Lens distortion",     body: "Wide phone lenses bow straight lines. We undo the barrel warp without eating the room." },
  { icon: FixHighlight, title: "Highlights + shadows", body: "Bright window blowing out a dim interior? We recover both ends so it reads as one space." },
  { icon: FixSky,       title: "Sky enhancement",     body: "Gloomy gray exterior day? Soft blue or even overcast sky — never a fake sunset." },
  { icon: FixClarity,   title: "Gentle clarity",      body: "A subtle Photoshop-pro pass. Texture stays natural. No sharpening into cartoons." }
];

/* ───── Page ────────────────────────────────────────────────────────── */

function App() {
  const [tweaks, setTweak] = useAppTweaks();
  return (
    <>
      <PageNav current="guide" />
      <main>
        <header className="page-hero">
          <p className="page-hero-eyebrow">Photo guide</p>
          <h1 className="page-hero-h">Phone shots that <em>earn their listing.</em></h1>
          <p className="page-hero-sub">
            A successful listing tells a story through 22–30 high-impact photos — enough to answer spatial questions and drive click-through, without becoming redundant. This is the field guide we hand sellers before a shoot. Follow it and your photos will already be good. We'll handle the last 20%.
          </p>
        </header>

        <div className="guide-hero-strip" aria-label="Sample listing photos">
          {HERO_THUMBS.map((t) => (
            <figure key={t.src} className="guide-hero-thumb">
              <img src={t.src} alt={t.room} loading="lazy" decoding="async" />
              <figcaption>{t.room}</figcaption>
            </figure>
          ))}
        </div>

        <section className="guide-section">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <p className="page-hero-eyebrow" style={{ margin: 0 }}>The golden rules</p>
            <h2 className="h2">Five things that decide if a photo lives or dies.</h2>
          </div>
          <div className="rules-grid">
            {GOLDEN_RULES.map((r) => (
              <div key={r.title} className={`rule-card rule-card-${r.kind}`}>
                <div className="rule-head">
                  <div className="rule-icon"><r.icon /></div>
                  <span className="rule-n">{r.n}</span>
                  <span className="rule-kind">{r.kind === "do" ? "DO" : "DON'T"}</span>
                </div>
                <h3>{r.title}</h3>
                <p>{r.body}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="guide-section">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <p className="page-hero-eyebrow" style={{ margin: 0 }}>The mandatory shot inventory</p>
            <h2 className="h2">Twenty-two to thirty photos. Here's the breakdown.</h2>
            <p className="section-lede" style={{ marginTop: 8 }}>
              Most listings under-shoot or over-shoot. Under-shoot and buyers can't picture the home. Over-shoot and the gallery becomes redundant. This split works for almost every single-family listing.
            </p>
          </div>
          <div className="inventory-grid">
            {SHOT_INVENTORY.map((s) => (
              <div key={s.room} className="inventory-card">
                <div className="inventory-card-head">
                  <span className="inventory-room">{s.room}</span>
                  <span className="inventory-count">{s.count}</span>
                </div>
                <p className="inventory-focus">{s.focus}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="guide-section">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <p className="page-hero-eyebrow" style={{ margin: 0 }}>The "blank canvas" checklist</p>
            <h2 className="h2">Stage before you shoot. The camera notices what your eye ignores.</h2>
            <p className="section-lede" style={{ marginTop: 8 }}>
              Buyers need to mentally move in. Removing half of the items from your shelves and closets creates the illusion of abundant storage — a top-selling feature for 83% of buyers.
            </p>
          </div>
          <div className="checklist-grid">
            {CHECKLIST.map((c) => (
              <div key={c.room} className="checklist-card">
                <div className="checklist-card-head">
                  <span className="checklist-icon"><c.icon /></span>
                  <h4>{c.room}</h4>
                </div>
                <ul>
                  {c.items.map((it, i) => <li key={i}>{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </section>

        <section className="guide-section guide-where-we-fit">
          <div className="section-head" style={{ marginBottom: 24 }}>
            <p className="page-hero-eyebrow" style={{ margin: 0 }}>Where we come in</p>
            <h2 className="h2">You did your part. We'll do the last 20%.</h2>
            <p className="section-lede" style={{ marginTop: 8 }}>
              Even a perfect phone photo has six things working against it that no amount of staging or lighting can fix. These are the corrections we run on every photo, in about 22 seconds.
            </p>
          </div>
          <div className="fix-grid">
            {FIXES.map((f) => (
              <div key={f.title} className="fix-card">
                <div className="fix-card-icon"><f.icon /></div>
                <h4>{f.title}</h4>
                <p>{f.body}</p>
              </div>
            ))}
          </div>
        </section>

        <PageCTA
          kicker="When your listing is shot"
          headline={<>Hand us the phone photos. <em>Get listing-ready JPGs back.</em></>}
          primary={{ label: "Fix a listing →", href: "/order" }}
          secondary={{ label: "Try one free first", href: "index.html#try" }}
        />
      </main>
      <PageFooter />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} pageContext="sub" />
    </>
  );
}

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