/* Repurpose case study — content sections (01–11).
   Body copy is verbatim from the Medium article.
   Uses shared utilities from case-study/util.jsx (loaded before this file). */

const { useState: rpSt, useRef: rpRf, useEffect: rpEff } = React

/* ── Local InView hook (for count-up trigger on stat cards) ── */
function rpUseInView(threshold) {
  threshold = threshold || 0.18
  var ref = rpRf(null)
  var state = rpSt(false)
  var seen = state[0],
    setSeen = state[1]
  rpEff(function () {
    var io = new IntersectionObserver(
      function (es) {
        es.forEach(function (e) {
          if (e.isIntersecting) {
            setSeen(true)
            io.disconnect()
          }
        })
      },
      { threshold: threshold },
    )
    if (ref.current) io.observe(ref.current)
    return function () {
      io.disconnect()
    }
  }, [])
  return [ref, seen]
}

/* ── Stat counter card ── */
function StatCard({ value, suffix, label, source }) {
  const [ref, seen] = rpUseInView()
  const n = useCountUp(value, seen)
  return (
    <div ref={ref} className="card" style={{ padding: 28 }}>
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(40px, 5vw, 60px)",
          lineHeight: 1,
          color: "var(--page-accent)",
        }}
      >
        {Math.round(n)}
        <span style={{ fontSize: "0.5em" }}>{suffix}</span>
      </div>
      <div
        style={{
          fontSize: 15,
          lineHeight: 1.5,
          color: "#555",
          marginTop: 8,
          maxWidth: "30ch",
        }}
      >
        {label}
      </div>
      {source && (
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            color: "var(--page-muted)",
            marginTop: 6,
          }}
        >
          {source}
        </div>
      )}
    </div>
  )
}

/* ── Reveal wrapper ── */
function Rv({ children, delay }) {
  const ref = useReveal()
  return (
    <div
      className="reveal"
      ref={ref}
      style={delay ? { transitionDelay: delay + "ms" } : {}}
    >
      {children}
    </div>
  )
}

/* ── Body: indented content column (aligns under the SectionHead number) ── */
function Body({ children, style }) {
  return (
    <div
      className="rp-body-col"
      style={Object.assign(
        {
          display: "grid",
          gridTemplateColumns: "200px 1fr",
          gap: 48,
          marginTop: 8,
        },
        style || {},
      )}
    >
      <div />
      <div style={{ maxWidth: "72ch" }}>{children}</div>
    </div>
  )
}

/* ── Para: standard body paragraph ── */
function Para({ children, style }) {
  return (
    <p
      style={Object.assign(
        {
          fontSize: 17,
          lineHeight: 1.7,
          color: "#444",
          maxWidth: "68ch",
          margin: "0 0 20px",
          textWrap: "pretty",
        },
        style || {},
      )}
    >
      {children}
    </p>
  )
}

/* ── Fig: real image or placeholder, with optional caption ── */
function Fig({ label, desc, h, ratio, caption, style, src, expandable }) {
  const [lightbox, setLightbox] = React.useState(false)

  React.useEffect(() => {
    if (!lightbox) return
    const handler = (e) => { if (e.key === "Escape") setLightbox(false) }
    window.addEventListener("keydown", handler)
    return () => window.removeEventListener("keydown", handler)
  }, [lightbox])

  h = h || 400
  const inner = ratio
    ? { width: "100%", aspectRatio: ratio, minHeight: "unset" }
    : { minHeight: h }
  const content = src ? (
    <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
      <img
        src={src}
        alt={label || ""}
        style={{
          width: "100%",
          height: "auto",
          display: "block",
          borderRadius: 6,
          cursor: expandable ? "zoom-in" : undefined,
        }}
        onClick={expandable ? () => setLightbox(true) : undefined}
      />
      {expandable && (
        <div
          onClick={() => setLightbox(true)}
          style={{
            position: "absolute",
            bottom: 10,
            right: 10,
            background: "rgba(0,0,0,0.55)",
            color: "#fff",
            borderRadius: 6,
            padding: "5px 9px",
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            cursor: "zoom-in",
            backdropFilter: "blur(4px)",
            userSelect: "none",
          }}
        >
          ⤢ Expand
        </div>
      )}
    </div>
  ) : (
    <div
      className="placeholder"
      style={Object.assign({}, inner, { borderRadius: 6 })}
    >
      <div className="ph-label">{label || "Image"}</div>
      {desc ? <div className="ph-desc">{desc}</div> : null}
    </div>
  )
  return (
    <figure style={Object.assign({ margin: "8px 0 0" }, style || {})}>
      <Rv>
        {content}
        {caption ? (
          <figcaption
            style={{
              marginTop: 14,
              fontSize: 13.5,
              lineHeight: 1.5,
              color: "var(--page-muted)",
              fontStyle: "italic",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.01em",
            }}
          >
            {caption}
          </figcaption>
        ) : null}
      </Rv>
      {lightbox && (
        <div
          onClick={() => setLightbox(false)}
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.88)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 9999,
            cursor: "zoom-out",
            padding: "32px",
          }}
        >
          <img
            src={src}
            alt={label || ""}
            style={{
              maxWidth: "100%",
              maxHeight: "100%",
              objectFit: "contain",
              borderRadius: 6,
              boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
            }}
          />
          <div
            style={{
              position: "fixed",
              top: 20,
              right: 24,
              color: "rgba(255,255,255,0.6)",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              userSelect: "none",
            }}
          >
            ESC or click to close
          </div>
        </div>
      )}
    </figure>
  )
}

/* ── Intro: three-card brief ── */
function RPIntro() {
  const CARDS = [
    {
      k: "What I designed",
      t: "Repurpose: a mobile app that uses Generative AI to turn old, unused items into creative, sustainable DIY projects.",
    },
    {
      k: "The hard part",
      t: "Helping people find personalized, practical, and inspiring ways to upcycle without feeling overwhelmed or uninspired.",
    },
    {
      k: "Why it's different",
      t: "It doesn't just suggest generic DIY ideas; it analyzes user's actual items, generates step-by-step projects, visualizes outcomes, and connects them to a community for shared inspiration.",
    },
  ]
  return (
    <section style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <Rv>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              color: "var(--page-accent)",
              marginBottom: 28,
            }}
          >
            The brief, in three lines
          </div>
        </Rv>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
            gap: 20,
          }}
        >
          {CARDS.map(function (c, i) {
            return (
              <Rv key={c.k} delay={i * 90}>
                <div className="card" style={{ padding: 28, height: "100%" }}>
                  <div
                    style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 11,
                      fontWeight: "bolder",
                      letterSpacing: "0.06em",
                      textTransform: "uppercase",
                      color: "var(--page-accent)",
                      marginBottom: 14,
                    }}
                  >
                    {c.k}
                  </div>
                  <p
                    style={{
                      fontFamily: "var(--font-display)",
                      fontStyle: "italic",
                      fontSize: "clamp(20px, 2vw, 25px)",
                      lineHeight: 1.3,
                      color: "var(--page-fg)",
                      margin: 0,
                      textWrap: "pretty",
                    }}
                  >
                    {c.t}
                  </p>
                </div>
              </Rv>
            )
          })}
        </div>
      </div>
    </section>
  )
}

/* ── Contents / TOC ── */
const TOC_ITEMS = [
  ["Problem Statement", "problem"],
  ["Why this problem is worth solving?", "why"],
  ["Looking at the Market Demand", "market"],
  ["Conducting & Analysing Survey", "survey"],
  ["Generating a Persona", "persona"],
  ["Designing a Customer Journey", "journey"],
  ["Competitor Analysis", "competitor"],
  ["Conceptualisation of Gen-AI based Solution and Key Features", "solution"],
  ["User Flow Chart", "design"],
  ["High Fidelity App Design & Prototype Video", "design"],
  ["User Feedback & Ethical Considerations", "feedback"],
]

function ContentsSection() {
  return (
    <section
      id="contents"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <Rv>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              color: "var(--page-accent)",
              marginBottom: 24,
            }}
          >
            The design process followed these key stages
          </div>
        </Rv>
        <Rv delay={80}>
          <ol
            style={{
              margin: 0,
              padding: 0,
              listStyle: "none",
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
              gap: "2px 48px",
            }}
          >
            {TOC_ITEMS.map(function (item, i) {
              return (
                <li key={i} style={{ borderTop: "1px solid var(--page-line)" }}>
                  <a
                    href={"#" + item[1]}
                    style={{
                      display: "flex",
                      alignItems: "baseline",
                      gap: 16,
                      padding: "16px 4px",
                      color: "var(--page-fg)",
                      textDecoration: "none",
                    }}
                  >
                    <span
                      style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: 11,
                        fontWeight: "bolder",
                        letterSpacing: "0.04em",
                        color: "var(--page-accent)",
                        minWidth: 28,
                      }}
                    >
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span style={{ fontSize: 17, lineHeight: 1.4 }}>
                      {item[0]}
                    </span>
                  </a>
                </li>
              )
            })}
          </ol>
        </Rv>
        <Rv delay={140}>
          <p
            style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontSize: "clamp(22px, 2.6vw, 30px)",
              color: "var(--page-accent)",
              margin: "48px 0 0",
            }}
          >
            Let's dive right into it!
          </p>
        </Rv>
      </div>
    </section>
  )
}

/* ── 01 — Problem statement ── */
function ProblemSection() {
  return (
    <section id="problem" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="01 — Problem"
          eyebrow="Problem statement"
          title="We throw things away long before we have to."
        />
        <Body>
          <Para>
            In today's world, where we're all bombarded with new products and
            trends, a lot of stuff ends up getting thrown away way too soon.
            This not only piles up waste but also harms the environment.
            Recycling and up-cycling are great options, but many people don't
            really know how to make the most of them or feel motivated to give
            it a try. The current solutions often feel too generic and don't
            connect with people on a personal level.
          </Para>
        </Body>
      </div>
    </section>
  )
}

/* ── 02 — Why it matters ── */
function WhySection() {
  return (
    <section
      id="why"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="02 — Motivation"
          eyebrow="Why this problem is worth solving"
          title="Good for the planet, and good for everyone."
        />
        <Body>
          <Para>
            So, why is fixing this important? Well, our throwaway culture is
            having a serious impact on the planet, causing waste and depleting
            resources. Finding a fresh approach to waste management is key. If
            we can make up-cycling easier, more engaging, and more rewarding, we
            can cut down on waste, save resources, and reduce pollution. Plus,
            it can encourage community involvement, promote lifelong learning
            about sustainability, and can save people's money. It's not just
            good for the environment; it's good for everyone.
          </Para>
          <Fig
            label="Environmental impact infographic"
            src="/rp-env-impact.webp"
            caption="Environmental Impact: Key Statistics Highlighting the Urgent Need for Sustainable Practices"
            style={{ marginTop: 28 }}
          />
        </Body>
      </div>
    </section>
  )
}

/* ── 03 — Market demand ── */
function MarketSection() {
  return (
    <section id="market" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="03 — Research"
          eyebrow="Research & analysis: market demand"
          title="Demand for sustainable, do-it-yourself solutions is growing fast."
        />
        <Body>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
              gap: 16,
              marginBottom: 32,
            }}
          >
            <StatCard
              value={73}
              suffix="%"
              label="of global consumers say they would change their consumption habits to reduce their environmental impact."
              source="Nielsen survey"
            />
            <StatCard
              value={660}
              suffix="B"
              label="US$ revenue generated in the DIY & Hardware Store market in 2024, and projected to keep growing."
              source="Statista · 2024"
            />
          </div>
          <Para>
            Recent studies indicate a growing awareness among consumers about
            environmental issues and a rising demand for sustainable products.
            According to a Nielsen survey, 73% of global consumers say they
            would definitely or probably change their consumption habits to
            reduce their environmental impact.{" "}
            <a
              href="https://www.bigcommerce.com.au/articles/ecommerce/sustainable-ecommerce/"
              target="_blank"
              rel="noopener"
              style={{ color: "var(--page-accent)" }}
            >
              [Source]
            </a>
          </Para>
          <Para>
            Moreover, the DIY home improvement market, which includes
            up-cycling, is growing rapidly. For instance, the revenue generated
            in the DIY &amp; Hardware Store market in 2024 amounts to US$660.00
            billion and is projected to continue growing in coming years.{" "}
            <a
              href="https://www.statista.com/outlook/cmo/diy-hardware-store/united-states"
              target="_blank"
              rel="noopener"
              style={{ color: "var(--page-accent)" }}
            >
              [Source]
            </a>
          </Para>
          <Para>
            To further validate the demand for DIY, recycling, and up-cycling, I
            also explored various social media platforms, including Facebook
            groups, Reddit, Instagram, and Pinterest, as well as Google Trends
            for keyword such as "upcycling". These platforms host thriving
            communities dedicated to sustainable living and creative
            repurposing. On Facebook and Reddit, numerous groups and forums have
            thousands of active members who regularly share up-cycling projects,
            tips, and success stories. Instagram and Pinterest are filled with
            visually appealing content showcasing innovative up-cycling ideas
            and DIY tutorials, garnering significant engagement in the form of
            likes, comments, and shares.
          </Para>
          <Para>
            The strong presence and active participation in these online
            communities underscore a growing interest and demand for sustainable
            practices, further validating the need for a dedicated app that
            leverages generative AI to provide personalised and practical
            up-cycling solutions.
          </Para>
          {/* Google Trends — full width so the chart axis is legible */}
          <Fig
            label="Google Trends screenshot"
            src="/rp-google-trends.webp"
            caption="Google Trends score as of April 2024 for keyword 'Upcycling'"
            style={{ marginTop: 28 }}
          />
          {/* Social media pair — two columns */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
              gap: 18,
              marginTop: 18,
            }}
          >
            <Fig
              label="Instagram / Reddit hashtag counts"
              src="/rp-social-media.webp"
              caption="No. of posts on Instagram for hashtags 'repurpose', 'recycle', 'diy'"
            />
            <Fig
              label="Facebook groups screenshot"
              src="/rp-facebook.webp"
              caption="Facebook Groups related to Repurposing, DIY and Upcycling"
            />
          </div>
        </Body>
      </div>
    </section>
  )
}

/* ── 04 — Survey ── */
const SURVEY_AREAS = [
  "Demographics (Age, occupation, Gender, etc.)",
  "Frequency of engagement in repurposing or up-cycling projects",
  "Type of items commonly repurposed, if any",
  "Motivation to recycle, repurpose",
  "Potential interest in a tool helping with generative creative ideas",
  "Main challenges faced during repurposing the items",
  "Functionalities they would find valuable",
  "Likelihood of using such tool in future",
]

const SURVEY_FINDINGS = [
  {
    k: "Age",
    t: `Responses were received from participants of various age groups i.e under 18 to over 65. However, the most responses were received from the participants between the age group of 25–34 and 45–54, with 16 participants being “male”, 11 being “female”, and 1 opting for ‘other’.`,
  },
  {
    k: "Occupation",
    t: "The participants' occupations vary significantly, including students, individuals working in technical fields, the health industry, business owners, teachers, and retirees.",
  },
  {
    k: "Engagement in DIY",
    t: "12 of the participants said that they engage in activities related to DIY, Up-cycling approximately once in a year, 6 participants chose the option 'several times a year', 9 chose 'minimum of once a month' and 1 participant opted for 'Never (I do not repurpose items at all)'. When asked what kind of items do they mostly recycle or repurpose, Electronics, Household Items, Furniture and Clothing were the top responses. Some of the participants also answered with option 'Packaging Material'.",
  },
  {
    k: "Motivations",
    t: `For most of the participants, the top motivations to get involved into up-cycling included "Environmental Concern", "Financial Savings", and some of them owing a creative outlet. One of the participant answered with "Minimalism".`,
  },
  {
    k: "Interest in innovative solution",
    t: "Upon asking how interested would they be in using a digital tool that helps generate creative ideas for repurposing, based on your old items, most of the participants answered with 'Extremely Interested' and second highest selected response being 'Very Interested'.",
  },
  {
    k: "Pain Points",
    t: "Most participants cited 'lack of ideas or inspiration' as the primary challenge when it comes to recycling. The second most common issue was 'difficulty in understanding how to repurpose certain materials', followed by concerns such as 'time constraints' and 'lack of tools.'",
  },
  {
    k: "Valuable Features",
    t: `For most of the participants, the option chosen as most valuable feature was "Suggestions for Creative Projects", the second most wished feature being "Step by Step guidance" and third important being feature "Information on tools and materials needed". Some of the participants also showed interest in having a possibility to share their projects with others.`,
  },
]

function SurveySection() {
  const linkStyle = {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    fontWeight: "bolder",
    letterSpacing: "0.04em",
    color: "var(--page-accent)",
    textDecoration: "none",
    borderBottom: "1px solid rgba(195,126,112,0.4)",
  }
  return (
    <section
      id="survey"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="04 — Research"
          eyebrow="Research & analysis: conducting and analysing the survey"
          title="11 questions, two languages, 28 responses."
        >
          <p
            style={{
              fontSize: "clamp(18px, 1.6vw, 22px)",
              lineHeight: 1.45,
              color: "var(--page-fg)",
              margin: 0,
            }}
          >
            In order to further understand the needs of the target group, a
            survey consisting of 11 questions was carried out in German as well
            as in English language.
          </p>
        </SectionHead>
        <Body>
          <Para>
            The survey was distributed in a digital manner was shared to the
            target audiences on different platforms such as Reddit, Facebook,
            etc. where total of 28 responses were received. Details related to
            the following areas were gathered via the survey:
          </Para>
          <ul
            style={{
              margin: "0 0 28px",
              padding: 0,
              listStyle: "none",
              display: "grid",
              gap: 10,
            }}
          >
            {SURVEY_AREAS.map(function (a, i) {
              return (
                <li
                  key={i}
                  style={{
                    display: "flex",
                    gap: 12,
                    alignItems: "baseline",
                    fontSize: 16,
                    lineHeight: 1.5,
                    color: "#444",
                  }}
                >
                  <span
                    style={{
                      color: "var(--page-accent)",
                      fontFamily: "var(--font-display)",
                      fontStyle: "italic",
                      fontSize: 18,
                      lineHeight: 1.4,
                    }}
                  >
                    —
                  </span>
                  <span>{a}</span>
                </li>
              )
            })}
          </ul>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 24,
              marginBottom: 40,
              fontSize: 14,
              alignItems: "center",
            }}
          >
            <span style={{ color: "var(--page-muted)" }}>
              Survey can be accessed using the following links:
            </span>
            <a
              href="https://s.surveyplanet.com/2at061g9"
              target="_blank"
              rel="noopener"
              style={linkStyle}
            >
              German version ↗
            </a>
            <a
              href="https://s.surveyplanet.com/vsx4dvya"
              target="_blank"
              rel="noopener"
              style={linkStyle}
            >
              English version ↗
            </a>
          </div>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
              gap: 16,
              marginBottom: 36,
            }}
          >
            {SURVEY_FINDINGS.map(function (f, i) {
              return (
                <Rv key={f.k} delay={(i % 2) * 80}>
                  <div
                    className="card card-border"
                    style={{ padding: 24, height: "100%" }}
                  >
                    <div
                      style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: 11,
                        fontWeight: "bolder",
                        letterSpacing: "0.06em",
                        textTransform: "uppercase",
                        color: "var(--page-accent)",
                        marginBottom: 12,
                      }}
                    >
                      {f.k}
                    </div>
                    <p
                      style={{
                        fontSize: 15,
                        lineHeight: 1.6,
                        color: "#444",
                        margin: 0,
                        textWrap: "pretty",
                      }}
                    >
                      {f.t}
                    </p>
                  </div>
                </Rv>
              )
            })}
          </div>

          <div
            style={{
              borderLeft: "2px solid var(--page-accent)",
              paddingLeft: 24,
            }}
          >
            <div
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                fontWeight: "bolder",
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                color: "var(--page-muted)",
                marginBottom: 16,
              }}
            >
              Survey result summary
            </div>
            <Para>
              Based on the survey results, several pain points and user needs
              emerge among participants interested in recycling and up-cycling.
              The primary pain points include a 'lack of ideas or inspiration'
              and 'difficulty in understanding how to repurpose certain
              materials'. Participants also expressed concerns about 'time
              constraints' and 'lack of tools' hindering their efforts.
            </Para>
            <Para>
              Their occupational diversity, ranging from students to retirees,
              suggests a broad spectrum of interests and challenges. Key needs
              identified include the desire for 'Suggestions for Creative
              Projects' as the most valued feature, followed closely by a need
              for 'Step-by-Step Guidance' and 'Information on Tools and
              Materials Needed'.
            </Para>
            <Para style={{ marginBottom: 0 }}>
              Additionally, participants expressed interest in a digital tool
              that generates creative ideas for repurposing based on their old
              items, indicating a strong appetite for practical solutions that
              support their recycling endeavours. Finally, there is a notable
              interest in sharing projects with others, highlighting a social
              aspect to their engagement in recycling activities.
            </Para>
          </div>
        </Body>
      </div>
    </section>
  )
}

/* ── 05 — Persona ── */
function PersonaSection() {
  return (
    <section id="persona" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="05 — Research"
          eyebrow="Research & analysis: the persona"
          title="Meet the upcycler the research pointed to."
        />
        <Body>
          <Para>
            The following persona was created to represent the target users,
            based on the research.
          </Para>
          <Fig
            label="Persona board"
            src="/rp-persona.webp"
            caption="Primary persona — synthesised from the survey and market research"
            style={{ marginTop: 24 }}
          />
        </Body>
      </div>
    </section>
  )
}

/* ── 06 — Customer journey ── */
function JourneySection() {
  return (
    <section
      id="journey"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="06 — Research"
          eyebrow="Research & analysis: customer journey"
          title="Mapping the journey from clutter to creation."
        />
        <Body>
          <Para>
            Below diagram shows the journey of a potential customer based on the
            data gathered from research.
          </Para>
          <Fig
            label="Customer journey map"
            src="/rp-journey.webp"
            caption="Customer journey map for a potential Repurpose user"
            style={{ marginTop: 24 }}
            expandable
          />
        </Body>
      </div>
    </section>
  )
}

/* ── 07 — Competitor analysis ── */
function CompetitorSection() {
  return (
    <section id="competitor" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="07 — Research"
          eyebrow="Research & analysis: competitor analysis"
          title="Where today's DIY platforms fall short."
        />
        <Body>
          <Para>
            To provide a brief analysis of these popular DIY platforms, I've
            outlined their strengths and weaknesses in the table below. This
            comparison highlights key features and limitations to offer a clear
            overview of each platform. The table below offers a clear comparison
            of these popular platforms, highlighting their strengths and
            weaknesses.
          </Para>
          <Fig
            label="Competitor comparison table"
            src="/rp-competitor.webp"
            caption="Competitor comparison — strengths and weaknesses of popular DIY platforms"
            style={{ marginTop: 24 }}
          />
        </Body>
      </div>
    </section>
  )
}

/* ── 08 — Solution ── */
const FEATURES = [
  {
    k: "Personalised Repurposing Suggestions",
    t: "Utilise advanced Generative AI to analyse images of user's old belongings by scanning the surroundings or a specific object, and generate custom upcycling ideas.",
  },
  {
    k: "Visual Simulations",
    t: "Provide visual representations or simulations showing how repurposed items could appear.",
  },
  {
    k: "Step-by-Step Guides",
    t: "Offer detailed instructions, including lists of required materials and tools, to guide users through each upcycling project.",
  },
  {
    k: "Community Engagement",
    t: "Foster an active community where users can share their projects, collaborate, and exchange knowledge and inspiration.",
  },
  {
    k: "Sustainability Focus",
    t: "Promote environmental impact reduction through repurposing and recycling practices.",
  },
]

function SolutionSection() {
  return (
    <section
      id="solution"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="08 — Concept"
          eyebrow="Conceptualisation of a Generative-AI-enhanced solution"
          title="One scan. Personalised, practical ideas for a second life."
        >
          <p
            style={{
              fontSize: 17,
              lineHeight: 1.7,
              color: "#444",
              margin: 0,
              textWrap: "pretty",
            }}
          >
            With the recent advancements in the field of Generative Artificial
            Intelligence, it is now possible to offer a promising solution that
            provides personalised, creative, and practical suggestions for
            repurposing items.
          </p>
        </SectionHead>
        <Body>
          <Para>
            By analysing images of user's old belongings, the AI can generate
            customised up-cycling ideas, complete with visual representations,
            step-by-step instructions, and a list of required materials and
            tools. Additionally, a community feature can provide social support,
            inspiration, and knowledge sharing among users. This approach has
            the potential to transform waste management practices, reduce
            environmental impact, and foster a culture of sustainability.
          </Para>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              color: "var(--page-muted)",
              margin: "32px 0 18px",
            }}
          >
            Key features
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
              gap: 16,
            }}
          >
            {FEATURES.map(function (f, i) {
              return (
                <Rv key={f.k} delay={(i % 3) * 80}>
                  <div
                    className="card card-border"
                    style={{ padding: 26, height: "100%" }}
                  >
                    <div
                      style={{
                        fontFamily: "var(--font-display)",
                        fontStyle: "italic",
                        fontSize: 30,
                        color: "var(--page-accent)",
                        lineHeight: 1,
                        marginBottom: 14,
                      }}
                    >
                      {String(i + 1).padStart(2, "0")}
                    </div>
                    <h3
                      style={{
                        fontSize: 17,
                        marginBottom: 10,
                        color: "var(--page-fg)",
                      }}
                    >
                      {f.k}
                    </h3>
                    <p
                      style={{
                        fontSize: 15,
                        lineHeight: 1.6,
                        color: "#444",
                        margin: 0,
                        textWrap: "pretty",
                      }}
                    >
                      {f.t}
                    </p>
                  </div>
                </Rv>
              )
            })}
          </div>
        </Body>
      </div>
    </section>
  )
}

/* ── 09 — Design & prototype ── */
function DesignSection() {
  return (
    <section id="design" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="09 — Design"
          eyebrow="Design & prototype"
          title="From screen flow to a high-fidelity prototype."
        />
        <Body>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              color: "var(--page-accent)",
              marginBottom: 14,
            }}
          >
            Application flow
          </div>
          <Para>
            I initiated the design process by developing a comprehensive screen
            flow, which illustrates how users will navigate through the app and
            highlights the features available at each stage. This step allowed
            me to better visualise user's journey through the app.
          </Para>
          <Para>
            The flowchart below illustrates the application's workflow. Blue
            rectangular elements represent specific screens, while grey
            rectangular elements depict functions or features included on those
            screens.
          </Para>
          <Fig
            label="App flowchart"
            src="/rp-flowchart.webp"
            caption="Flowchart for proposed solution in form of an App"
            style={{ marginTop: 24, marginBottom: 44 }}
          />

          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              color: "var(--page-accent)",
              marginBottom: 14,
            }}
          >
            High-fidelity designs
          </div>
          <Para>
            After finalising the flow and wireframes, I moved towards designing
            high-fidelity screens where I used the same wireframes and refined
            them into high-fidelity screens. This stage also involved focusing
            on visual details, aesthetics, and establishing the app's branding.
            I focused on giving the app a cohesive and appealing look and feel
            throughout the interface.
          </Para>
        </Body>

        {/* Hi-fi screens image */}
        <Fig
          src="/1*0GWpobSuOYcpQ5CWIoJpig.webp"
          label="High fidelity screens"
          caption="High-fidelity screen designs — Repurpose app"
          style={{ marginTop: 32 }}
        />

        {/* Prototype video */}
        <Body style={{ paddingTop: 56 }}>
          <Para style={{ marginBottom: 16 }}>
            Watch a prototype video showcasing the AI generation feature in
            action:
          </Para>
          <figure style={{ margin: "8px 0 0" }}>
            <div
              style={{
                position: "relative",
                width: "100%",
                aspectRatio: "16 / 9",
              }}
            >
              <iframe
                src="https://www.youtube.com/embed/xbdEuFBWOcI?si=kF1vVSbTfp2rWtIO"
                title="YouTube video player"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  borderRadius: 6,
                  border: "none",
                }}
              />
            </div>
            <figcaption
              style={{
                marginTop: 14,
                fontSize: 13.5,
                lineHeight: 1.5,
                color: "var(--page-muted)",
                fontStyle: "italic",
                fontFamily: "var(--font-display)",
                letterSpacing: "0.01em",
              }}
            >
              Prototype video — the AI generation feature in action
            </figcaption>
          </figure>

          <Para style={{ marginTop: 40, marginBottom: 16 }}>
            The full high-fidelity Figma file is embedded below.
          </Para>
          <figure style={{ margin: "8px 0 0" }}>
            <div
              style={{
                position: "relative",
                width: "100%",
                aspectRatio: "16 / 9",
              }}
            >
              <iframe
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  border: "1px solid rgba(0,0,0,0.1)",
                  borderRadius: 6,
                }}
                src="https://embed.figma.com/design/ftGf9yhvY2Kc2BCwCKYfSl/Repurpose---Upcycling-and-DIY-using-Gen-AI?node-id=244-2699&embed-host=share"
                allowFullScreen
                title="Repurpose - Figma design file"
              />
            </div>
            <figcaption
              style={{
                marginTop: 14,
                fontSize: 13.5,
                lineHeight: 1.5,
                color: "var(--page-muted)",
                fontStyle: "italic",
                fontFamily: "var(--font-display)",
                letterSpacing: "0.01em",
              }}
            >
              High-fidelity Figma file — Repurpose app design
            </figcaption>
          </figure>
        </Body>
      </div>
    </section>
  )
}

/* ── 10 — User feedback ── */
function FeedbackSection() {
  return (
    <section
      id="feedback"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="10 — Validation"
          eyebrow="User feedback & iterations"
          title="Tested on a real device, then iterated."
        />
        <Body>
          <Para>
            To gather feedback, users were asked to test the app prototype on a
            real iPhone 14 Pro Max. Below is an example of user comments
            highlighting areas where potential improvements can be made:
          </Para>
          <blockquote
            style={{
              margin: "0 0 28px",
              padding: "0 0 0 28px",
              borderLeft: "2px solid var(--page-accent)",
            }}
          >
            <p
              style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: "clamp(22px, 2.4vw, 30px)",
                lineHeight: 1.3,
                color: "var(--page-fg)",
                margin: 0,
                textWrap: "pretty",
              }}
            >
              "How can I search for interesting projects without scanning an
              object or the surroundings?"
            </p>
          </blockquote>
          <Para style={{ marginBottom: 0 }}>
            The above possibility was addressed as a feature under 'Community'
            menu where a user can directly import a project of their wish. Also
            added in the "App Flow" diagram as a feature. Once the project is
            imported, the project should appear under 'Projects' menu, and can
            either be started directly or can be planned for a later date.
          </Para>
        </Body>
      </div>
    </section>
  )
}

/* ── 11 — Ethical considerations ── */
const ETHICS = [
  {
    k: "Transparent Data Collection & Storage",
    t: "The app will require users to upload images of their belongings. Ensuring clear consent and transparent policies on the use of these images and their metadata is essential. By collecting only the absolute necessary data, many issues related to data privacy and storage can be avoided. For example, before the user starts the scan, they are notified about the data collection and process.",
  },
  {
    k: "Environmental Impact",
    t: "While the app promotes sustainable behaviours like recycling, ensuring that the app itself operates with minimal environmental impact (e.g., energy-efficient algorithms, eco-friendly data centres) aligns with its mission.",
  },
  {
    k: "Training Data Diversity",
    t: "To provide inclusive and fair suggestions, the AI model would be trained on diverse datasets. This helps mitigate biases that could inadvertently exclude certain demographics or preferences from receiving accurate repurposing suggestions. The app also allows users to report any kind of mis-leading outputs.",
  },
  {
    k: "Showing the users that we're listening",
    t: "In the case of false or misleading suggestions, it should be possible for the user to report that particular suggestion. This helps the AI models to learn and the user receives the feeling that they're being heard.",
  },
]

function EthicsSection() {
  return (
    <section id="ethics" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="11 — Responsibility"
          eyebrow="Ethical considerations"
          title="Designing the AI to be trusted."
        />
        <Body>
          <div
            style={{
              display: "grid",
              gap: 1,
              background: "var(--page-line)",
              border: "1px solid var(--page-line)",
              borderRadius: 16,
              overflow: "hidden",
            }}
          >
            {ETHICS.map(function (e) {
              return (
                <div
                  key={e.k}
                  style={{
                    background: "var(--page-card)",
                    padding: "26px 28px",
                  }}
                >
                  <h3
                    style={{
                      fontSize: 17,
                      marginBottom: 10,
                      color: "var(--page-fg)",
                    }}
                  >
                    {e.k}
                  </h3>
                  <p
                    style={{
                      fontSize: 15.5,
                      lineHeight: 1.65,
                      color: "#444",
                      margin: 0,
                      maxWidth: "78ch",
                      textWrap: "pretty",
                    }}
                  >
                    {e.t}
                  </p>
                </div>
              )
            })}
          </div>
        </Body>
      </div>
    </section>
  )
}

/* ── Closing note (verbatim article sign-off) ── */
// function ClosingSection() {
//   return (
//     <section id="closing" style={{ background: "var(--page-bg)" }}>
//       <div className="wrap">
//         <div style={{ maxWidth: "60ch", margin: "0 auto", textAlign: "center" }}>
//           <Rv>
//             <p
//               style={{
//                 fontFamily: "var(--font-display)",
//                 fontStyle: "italic",
//                 fontSize: "clamp(24px, 3vw, 36px)",
//                 lineHeight: 1.3,
//                 color: "var(--page-fg)",
//                 margin: 0,
//                 textWrap: "pretty",
//               }}
//             >
//               Thank you for taking the time to read this. I genuinely hope you find the idea and
//               solution interesting. If you have any suggestions for improvement, please feel free to
//               share them in the comments. I would love to hear your thoughts.
//             </p>
//           </Rv>
//         </div>
//       </div>
//     </section>
//   );
// }

/* ── Responsive override for Body grid ── */
;(function () {
  var style = document.createElement("style")
  style.textContent = `
    @media (max-width: 720px) {
      .rp-body-col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .rp-body-col > div:first-child {
        display: none;
      }
    }
  `
  document.head.appendChild(style)
})()

Object.assign(window, {
  RPIntro,
  ContentsSection,
  ProblemSection,
  WhySection,
  MarketSection,
  SurveySection,
  PersonaSection,
  JourneySection,
  CompetitorSection,
  SolutionSection,
  DesignSection,
  FeedbackSection,
  EthicsSection,
  // ClosingSection,
})